Переместить с блоков в низ
<section class="about">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="block2">
</div>
<div class="block1">
<div class="block_in_block">
<h1 class="About">About Us.</h1>
<span class="block_text">Analytics release series A financing launch party interaction design android angel investor. Vesting period social media sales conversion launch party rockstar incubator customer social proof graphical user interface technology supply chain.
Non-disclosure agreement rockstar creative partner network launch party social proof paradigm shift long tail influencer.
<p><p>Monetization validation success. Seed round channels product
management. Customer non-disclosure agreement strategy
android growth hacking ramen buyer.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="Focus">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="block_text_2">
<h1>Our Focus</h1>
<p>We understand your requirement and provide quality works.</p>
</div>
</div>
</div>
</div>
</section>
CSS
.block1{
position: absolute;
background-color: white;
width: 653px; /* Ширина слоя */
height: 551px;
margin: 65px 391px 226px 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding: 10px; /* Поля вокруг текста */
}
.block_in_block{
width: 488px; /* Ширина слоя */
height: 350px;
margin: 95px 83px 106px 84px;
}
.About{
margin: 0px 0px 48px 0px;
}
.block_text{
font-size: 15px;
text-align: left;
}
.block2{
position:absolute;
width: 555px; /* Ширина слоя */
height: 700px;
border: 5px solid #AA8A84; /* рамка */
background-image: linear-gradient(to top, rgb(77, 29, 29), rgb(85, 37, 39), rgb(93, 44, 50), rgb(100, 52, 60), rgb(108, 60, 70), rgb(116, 67, 81), rgb(124, 75, 91), rgb(132, 82, 102), rgb(140, 90, 112), rgb(147, 98, 122), rgb(155, 105, 133), rgb(163, 113, 143));
}
Делаю Лаборатоную
Почему <section class="Focus"> лезат на блоки <section class="about">
Как сделать что бы они начиланалось с низу <section class="about">
Ответы (1 шт):
Автор решения: Spartak
→ Ссылка
Происходит это из-за абсолютного позиционирования. Ознакомьтесь с данным материалом http://htmlbook.ru/css/position и внесите следующие правки в css код:
.block1{
/*position: absolute;*/ /*эту строку уберите */
background-color: white;
width: 653px; /* Ширина слоя */
height: 551px;
margin: 65px 391px 226px 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding: 10px; /* Поля вокруг текста */
}
.block2{
/*position: absolute;*/ /*эту строку уберите */
width: 555px; /* Ширина слоя */
height: 700px;
border: 5px solid #AA8A84; /* рамка */
background-image: linear-gradient(to top, rgb(77, 29, 29), rgb(85, 37, 39), rgb(93, 44, 50), rgb(100, 52, 60), rgb(108, 60, 70), rgb(116, 67, 81), rgb(124, 75, 91), rgb(132, 82, 102), rgb(140, 90, 112), rgb(147, 98, 122), rgb(155, 105, 133), rgb(163, 113, 143));
}
.focus, .about {
display:block;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
