Фиксированная позиция относительно родителя, а не браузера

Question 1

Я хочу, чтобы правая и левая стороны div были зафиксированы в позиции с классом main-wrapper в строке с синим цветным полем ... Сейчас он занимает верхнюю позицию с заголовком. Хочу, чтобы он был плавающим, фиксированным, а не абсолютным. main-wrapper.position top: от 0 до main-wrapper. Пробовал почти все, не работает.

Ниже код:

.header{
     width:500px;
     margin:0 auto;
     background:red;
     height:300px;
}
 .container{
     margin:20px auto;
     background:blue;
     height:1000px;
    width:500px;
}
 .header-wrapper,.main-wrapper{
     width:100%;
}
 .main-wrapper{
     position:relative;
}
 .left-ad,.right-ad{
     width:100px;
     height:250px;
     background:pink;
     position:fixed;
}
 .left-ad{
    left:0;
     top:0;
}
 .right-ad{
    right:0;
     top:0;
}

<div class="header-wrapper">
    <div class="header">
    </div>
</div>
<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

html css

-1

Bini Mehta 14 Мар 2018 в 10:07

Answer

Применяемая позиция: свойство sticky, чтобы сделать левый и правый div фиксированными абсолютными. Свойство позиции

<div class="header-wrapper">
  <div class="header">
  </div>
</div>

<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

`.header { 
      width:500px;
      margin:0 auto;
      background:red;
      height:500px;
 }
.container { 
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
.header-wrapper, .main-wrapper { 
    width:100%;
}
.main-wrapper { 
    position:relative;
}
.left-ad, .right-ad {     
     position: sticky; 
     width:100px;
     height:250px;
     background:pink;
 }
.left-ad {float:left; left:0; top:0; }
.right-ad {float:right; right:0; top:0; }`

1

Venkatesh Chitluri 14 Мар 2018 в 09:15

Answer

Это ты хочешь ??

Добавьте значение top в селектор .left-ad,.right-ad.

.header{
     width:500px;
     margin:0 auto;
     background:red;
     height:300px;
}
 .container{
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
 .header-wrapper,.main-wrapper{
     width:100%;
}
 .main-wrapper{
     position:relative;
}
 .left-ad,.right-ad{
     width:100px;
     height:250px;
     background:pink;
     position:fixed;
}
 .left-ad{
     left:0;
     top:328px;
}
 .right-ad{
     right:0;
     top:328px;
}

<div class="header-wrapper">
    <div class="header">
    </div>
</div>
<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

0

Anzil khaN 14 Мар 2018 в 09:05

Question 2

Применяемая позиция: свойство sticky, чтобы сделать левый и правый div фиксированными абсолютными. Свойство позиции

<div class="header-wrapper">
  <div class="header">
  </div>
</div>

<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

`.header { 
      width:500px;
      margin:0 auto;
      background:red;
      height:500px;
 }
.container { 
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
.header-wrapper, .main-wrapper { 
    width:100%;
}
.main-wrapper { 
    position:relative;
}
.left-ad, .right-ad {     
     position: sticky; 
     width:100px;
     height:250px;
     background:pink;
 }
.left-ad {float:left; left:0; top:0; }
.right-ad {float:right; right:0; top:0; }`

1

Venkatesh Chitluri 14 Мар 2018 в 09:15

Question 3

Это ты хочешь ??

Добавьте значение top в селектор .left-ad,.right-ad.

.header{
     width:500px;
     margin:0 auto;
     background:red;
     height:300px;
}
 .container{
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
 .header-wrapper,.main-wrapper{
     width:100%;
}
 .main-wrapper{
     position:relative;
}
 .left-ad,.right-ad{
     width:100px;
     height:250px;
     background:pink;
     position:fixed;
}
 .left-ad{
     left:0;
     top:328px;
}
 .right-ad{
     right:0;
     top:328px;
}

<div class="header-wrapper">
    <div class="header">
    </div>
</div>
<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

0

Anzil khaN 14 Мар 2018 в 09:05

Связанные вопросы

Новые вопросы

html

Фиксированная позиция относительно родителя, а не браузера

2 ответа

Похожие вопросы