enter image description here

/*css*/ * { box-sizing: border-box; } ::selection { background-color: #4EC6DE; } .tabbed { width: 700px; margin: 50px auto; } .tabbed > input { display: none; } .tabbed > label { display: block; float: left; padding: 12px 20px; margin-right: 5px; cursor: pointer; transition: background-color .3s; } .tabbed > label:hover, .tabbed > input:checked + label { background: #4EC6DE; } .tabs { clear: both; perspective: 600px; } .tabs > div { width: 700px; position: absolute; border: 2px solid #4EC6DE; padding: 10px 30px 40px; line-height: 1.4em; opacity: 0; transform: rotateX(-20deg); transform-origin: top center; transition: opacity .3s, transform 1s; } #tab-nav-1:checked ~ .tabs > div:nth-of-type(1), #tab-nav-2:checked ~ .tabs > div:nth-of-type(2), #tab-nav-3:checked ~ .tabs > div:nth-of-type(3), #tab-nav-4:checked ~ .tabs > div:nth-of-type(4) { transform: rotateX(0); opacity: 1; } @media screen and (max-width: 700px) { .tabbed { width: 400px; } .tabbed > label { display: none; } .tabs > div { width: 400px; border: none; padding: 0; opacity: 1; position: relative; transform: none; margin-bottom: 60px; } .tabs > div h2 { border-bottom: 2px solid #4EC6DE; padding-bottom: .5em; } } */
  • one
    Try adding to .tabs { position: relative; } .tabs { position: relative; } - Bert

1 answer 1

As @Spartacus already said, specify for .tabs {position: relative;} .

This is justified by the fact that the element with position: absolute; , as if using positioning relative to the parent with position: relative; because in your code .tabs > div {position: absolute;} for which position: relative; has only body , then .tabs > div becomes relatively body .

position: absolute
Indicates that the element is absolutely positioned, while other elements are displayed on the web page as if an absolutely positioned element and no. The position of the element is set by the properties left, top, right and bottom, and the position value of the parent property also affects the position. So, if the parent’s position is set to static or there is no parent, then the coordinates are read from the edge of the browser window. If the parent's position value is specified as fixed, relative or absolute, then the coordinates are read from the edge of the parent element.

position | htmlbook.ru