CSS "calc()" function returns invalid-CodePudding

I have a div element that I want to put a button in, and I want to use the calc() function to move the button down relative to the position of that div element, but it returns as an "Invalid property value" according to chrome dev tools.

#rArrow {
    top: calc(inherit   80px);
    height: 76px;
    padding: 8px;
    position: absolute;
    text-align: center;
    width: 28px;
}

CodePudding user response：

calc() is suppose to calculate using a mathematical expression like -, , * or /. According to your problem the inherit keyword can only exist alone as a value in a property declaration. It cannot be used with functions like calc() either.

CodePudding user response：

When you use "initial" value top/left/right/bottom it means the value becomes "auto". the calc() function in css only accepts values "length", "frequency", "angle", "time", "percentage", "number", or "integer" is allowed.

ref : CSS Calc()