Uning mazmuni bo'yicha yuqori (divizionga qarab) bo'ling

Ikki narsadan iborat idishim bor:

  • Orqa fonda ko'rsatiladigan fon va
  • fonning yuqori qismidagi elementlar ro'yxati

Men "orqa" qismini ishlay boshladim va witz z-index va nisbiy joylashishni aniqlashdi. Lekin endi mening konteyner div o'z tarkibiga ko'ra uning o'lchamini o'zgartirmaydi. Men uning ichidagi elementlarning ro'yxatidan yuqori bo'lishini xohlayman. Buni piksellarda mutlaq balandlik o'rnatmasdan qanday qilsa bo'ladi?

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {
  width: 100px;
  height: 80px;  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.front,
.back {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
}

.front {
  z-index: 2;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
1

7 javoblar

Try the following css: Remove height from .container and .front .back And in .front .back change position to relative

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {   
  width: 100px;
  position: relative;
  border: 1px solid red;
}

.front,
.back {  
  width: 100%;             
  position: relative;  
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
}

.front {
  z-index: 2;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Try the following css: Remove height from .container and .front .back And in .front .back change position to relative

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {   
  width: 100px;
  position: relative;
  border: 1px solid red;
}

.front,
.back {  
  width: 100%;             
  position: relative;  
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
}

.front {
  z-index: 2;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

all you need to do is remove height from .container and .back and use bottom: 0 for .back

Shuningdek, : uchun pozitsiya: mutlaq shart emas. chunki barcha kontentlar .front ichida joylashgan bo'lib, u statik yoki nisbatan bo'lishi kerak. shuning uchun kontent to'g'ri balandlikda bo'ladi.

Bu erda yangilangan snippet mavjud.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {
  width: 100px;
  //height: 80px;  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.back {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.back {
  z-index: -1;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Ushbu ajoyib echim uchun sizga katta rahmat. Agar kimdir bu narsaga qoqilsa, nihoyat men tartibni o'zgartirish uchun stolga o'girildim ...
qo'shib qo'ydi muallif Robert, manba

all you need to do is remove height from .container and .back and use bottom: 0 for .back

Shuningdek, : uchun pozitsiya: mutlaq shart emas. chunki barcha kontentlar .front ichida joylashgan bo'lib, u statik yoki nisbatan bo'lishi kerak. shuning uchun kontent to'g'ri balandlikda bo'ladi.

Bu erda yangilangan snippet mavjud.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {
  width: 100px;
  //height: 80px;  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.back {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.back {
  z-index: -1;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back">Background</div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Ushbu ajoyib echim uchun sizga katta rahmat. Agar kimdir bu narsaga qoqilsa, nihoyat men tartibni o'zgartirish uchun stolga o'girildim ...
qo'shib qo'ydi muallif Robert, manba

Just change the position to relative of .front and remove height.
height 100% on the .back

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {
  width: 100px;
  /*height: 80px;*/  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.front,
.back {
  width: 100%;
  /*height: 80px;*/
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
  height: 100%;
}

.front {
  z-index: 2;
  position: relative;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back"></div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Just change the position to relative of .front and remove height.
height 100% on the .back

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.container {
  width: 100px;
  /*height: 80px;*/  /* I want container to bis a high as its content */
  position: relative;
  border: 1px solid red;
}

.front,
.back {
  width: 100%;
  /*height: 80px;*/
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  z-index: 1;
  height: 100%;
}

.front {
  z-index: 2;
  position: relative;
}

.inner {
  border: 1px solid green;
  margin-bottom: 4px
}
<div class="container">
  <div class="back"></div>
  <div class="front">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Bu eng oddiy kod deb o'ylayman:

remove class front & back, change to just one class .content and .content::after. put your background in content::after

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>
<head>
        <title>test</title>
        
</head>
<body>
<div class="container">
  <div class="content">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner" style="background: red">Three</div>
    <div class="inner">Four</div>
    <div class="inner">Five</div>
    <div class="inner">Six</div>
  </div>
</div>
</body>
</html>
</div> </div>

0
qo'shib qo'ydi
va siz fonda .content topdan fonga qo'shishingiz mumkin .content :: bulardan keyin: <div class = "ichki" style = "background: red"> Three </div>
qo'shib qo'ydi muallif drisoel, manba