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;
}
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.
It's already been mentioned from previous answers (fadzrinmadu and Samitha Wijesekara) why inherit isn't a valid value for calc(). I will address your actual problem that lead you to try to adjust the top property in the first place. I'm assuming that the distance between the top of the <button> and the top of the containing <div> (<menu> in example) was not 80px.
A tag that has position: absolute measures all of it's positions (top, bottom, right, and left) in relation to it's nearest ancestor tag that has position: relative. If there's no ancestor tag with position: relative, then the distance is set between the edge of the page and the edge of the tag with position: absolute.
Add position: relative to the containing <div>
In the example below there are two <menu> tags, each with a button.
The <menu> on the left has position: relative
The <menu> on the right has position: static (that's default and it's the same as not having position at all).
/* ✳️ Most Relevant */
/* For Demo Only */
main {
display: flex;
justify-content: center;
align-items: center;
}
menu {
position: relative; /* ✳️ */
width: 84px;
height: 236px;
border: 1px dashed tomato;
}
/* For Demo Only */
.static {
position: static;
}
.rArrow {
position: absolute; /* ✳️ */
top: 80px; /* ✳️ */
width: 28px;
height: 76px;
padding: 8px;
font-size: 3rem;
text-align: center;
}
/* Optional */
.rArrow::before {
content: '▶';
display: block;
margin: 2.5px 0 0 -9px;
color: magenta;
transform: scaleY(2) scaleX(0.5);
}
/* For Demo Only */
b {
display: block;
width: 12px;
height: 80px;
font-size: 3rem;
text-align: center;
}
/* For Demo Only */
b::before {
content: '⇕80px';
display: block;
margin: 10px 0 0 0;
font-family: Consolas;
color: #930;
transform: scaleY(2) scaleX(0.5);
}
/* For Demo Only */
.offset {
margin-top: -24px
}<main>
<menu>
<b><!--For Demo Only--></b>
<button class='rArrow'></button>
</menu>
<menu class='static'>
<b class='offset'>
<!--For Demo Only-->
</b>
<button class='rArrow'></button>
</menu>
</main>
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()
