divning balandligini qanday qilib to'g'ri belgilaydi?

Men CSS formatiga moslashuvchanman Quyidagi kod bor.

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

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
  z-index:-10;
  position:absolute;
  top:0;
}
<div class="parent">
  
  <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>

The content has to placed above the image.
I want to place the "footer" after both of image and content text whenever the window width is small and the image height is small less than the content textbox height.
But "footer" overlaid to the image. How could I fix this issue?
Thanks. When changing the window width, the following result will get.
enter image description here enter image description here

2
.parent balandligini img balandligiga o'rnating.
qo'shib qo'ydi muallif Radonirina Maminiaina, manba
Buning sababi pastki da joylashuvini: relative; dan foydalanayotganligingiz. Nima uchun siz mutlaq joylashishni aniqlash yordamida tasvirni o'rnatasiz?
qo'shib qo'ydi muallif Andrei V, manba

8 javoblar

Kodingizga ikkita o'zgartirish kiritdim.

(1) I changed the images position to relative Read up on positioning here

(2) .child yorlig'idan keyin img yorlig'ini manzilingizni almashtirdim. Shunday qilib, u rasm ustida joylashgan.

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

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
  z-index:-10;
  position:relative;
  top:0;
}
<div class="parent">
    <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>

Agar siz fon tasviriga ega bo'lishni xohlasangiz, background-image xususiyatidan foydalanishingiz mumkin (quyida ko'rib chiqing);

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

.parent {
  position: relative;
  border: 1px solid #eee;
}

.child {
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
  background: url("https://www.vacations-abroad.com/assets/img/about.jpg"); /*this can be cached*/
  min-height: 500px;  /* sets a minimum height*/
}

.footer {
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  position: relative;
  top: 0;
}
<div class="parent">
  <div class="child">
    The responsive design:
This is the content. </div> <!--No need for img tag!--> </div> <div class="footer"> Footer </div>
</div> </div>
1
qo'shib qo'ydi
Buning sababi, "yuqoridan" tasvir. Agar siz bu rasmni ning ustiga * bo'lishini xohlasangiz (masalan, qatlamli), ikkinchi misolimga qarang
qo'shib qo'ydi muallif jbutler483, manba
Nima uchun matn tarkibida oq rangli fon bor?
qo'shib qo'ydi muallif talent_depeloper, manba

Kodingizni shu tarzda o'zgartiring. rasmning mutlaq o'rnini olib tashladim va mutlaq ni .child sinfiga qo'shib qo'ydim

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

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
        position: absolute; /* newly added */
        top: 60px; /* newly added */
        left: 0; /* newly added */
        width: 100%; /* newly added */
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
}
<div class="parent">
  
  <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>
1
qo'shib qo'ydi
men seni qabul qilmayman. Siz menga yanada aniqroq aytib bera olasizmi?
qo'shib qo'ydi muallif Jishnu V S, manba
Iltimos, nima qilganingiz va nimaga nima qilgani haqida ba'zi ma'lumotlarni kiriting.
qo'shib qo'ydi muallif Patrick Mlr, manba
"Rasm" va kontent matnidan keyin "footer" ni joylashtirmoqchiman ", ammo tasvir balandligi" kontentning matn "balandligidan past bo'lsa," footer "" kontent matnini "o'z ichiga oladi.
qo'shib qo'ydi muallif talent_depeloper, manba
Derazalarni o'zgartirganda tasvirlarni qo'shdim. Imzo va kontentdan keyin "footer" ni joylashtirmoqchiman. Biroq, birinchi rasmda, footer rasmni qoplagan.
qo'shib qo'ydi muallif talent_depeloper, manba

Taginiz mutlaq holatga ega, shuning uchun bu tegning balandligi .parent divning balandligiga bog'liq emas Muammoni bartaraf etish uchun, yuqori taglikning yuqori tagligini kontent yoki tasvir balandligi bilan bir xil qilishingiz kerak.

Ushbu kodni sinab ko'ring.

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

    .parent{
      position:relative;
      border:1px solid #eee;
      min-height:180px;
    }

    .child{
      margin-top:30px;
      font-size:18pt;
      border:4px solid #ff6600;
      padding:20px;
      color:#f00;
      position:absolute;
    }

    .footer{
       background-color:#333;
       color:#fff;
    }

    img{
      width:100%;
      z-index:-10;
      position:relative;
      top:0;
    }
<div class="parent">
    <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>
1
qo'shib qo'ydi

Siz sizning mutlaq joyingiz bo'lgani uchun .parent ga balandlikni o'rnatishingiz kerak.

.parent{
  position:relative;
  border:1px solid #eee;
  height: 350px; /* example of height */
}
0
qo'shib qo'ydi

elementning balandligi uning ichida joylashgan barcha nisbatan joylashtirilgan kontentlarga o'rnatilishi va bu mutlaq joylashtirilgan tasvirni e'tiborsiz qoldiradigan narsa bo'lib qoladi.

Siz nima qilishingiz kerak CSS-ga quyidagilarni qo'shing:

.parent{
  position:relative;
  border:1px solid #eee;
  overflow: hidden;
  height: 400px;
}

https://jsfiddle.net/w9h9ee04/

Buning qanday ishlashini ko'rish uchun jsfiddle-ga qarashga harakat qiling. Bu yerdan siz rasmning balandligi nima bo'lishidan qat'i nazar, ota-ona balandligini belgilashingiz kerak bo'ladi.

Tahrirlash:

bu muqobil yechim. Rasmni mutlaqo joylashtirishning o'rniga, suzuvchi matn qutisini mutlaqo joylashtirishingiz mumkin. Iltimos, ushbu yangi jsfiddlega qarang:

https://jsfiddle.net/p11bu007/

Mana yangilangan CSS:

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  width: 100%;
  text-align: center;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
  position: absolute;
  top: 30px;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
}
0
qo'shib qo'ydi

Muammo sizning suratingizda mutlaq pozitsiyani aniqlaganingizda, bu tasvirni sahifa oqimidan chiqarib tashlashga olib keladi, shuning uchun sizning footeringiz Rasmni e'tiborsiz qoldiradi.

Ota-ona elementining balandligini tasvirning balandligiga teng sozlashni harakat qilib ko'ring.

0
qo'shib qo'ydi

Buni ko'ring. Kontent o'rnini o'zgartiring va mutlaq pozitsiyani olib tashlang:

Ruxsat etilgan kodingiz

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

.parent {
  border: 1px solid #eee;
}

.child {
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
}

.footer {
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  top: 0;
}
<div class="parent">

  <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>
0
qo'shib qo'ydi

Rasmni mutlaq holatga keltirdingiz, shunda u hamma narsani qoplaydi. Nima uchun kerakli ta'sirga erishish uchun fonni ishlatmaysiz?

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

.parent {
  position: relative;
  border: 1px solid #eee;
  background: url('https://www.vacations-abroad.com/assets/img/about.jpg');
  background-size: cover;
  min-height: 100vh;
}

.child {
  position: relative;
  margin-top: 30px;
  font-size: 18pt;
  border: 4px solid #ff6600;
  padding: 20px;
  color: #f00;
}

.footer {
  position: relative;
  background-color: #333;
  color: #fff;
}

img {
  width: 100%;
  z-index: -10;
  position: absolute;
  top: 0;
}
<div class="parent">
  <div class="child">
    The responsive design:
This is the content. </div> </div> <div class="footer"> Footer </div>
</div> </div>
0
qo'shib qo'ydi
Barcha rasm kontentini ko'rsatmaydi.
qo'shib qo'ydi muallif talent_depeloper, manba
To'g'ri, lekin fon tasvirini sezgir qiladi. Agar fon rasmini aks ettiradigan butun rasmni ko'rsatishga ishonch hosil qilishni istasangiz: contain;
qo'shib qo'ydi muallif Dragos Micu, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb