CSS "calc()" function returns invalid

user_18789108 0
Viewed 114

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 css-position css
3 Answers

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.

user_148420530

The Real Problem

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.

The Explanation

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.

The Solution

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>

user_28132240

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()

user_95575000
Related