2

Картинки с абсолютным позиционированием, как сделать, чтобы следующий блок разместился под картинками? Он размещается перед ними. Как получилось

Как должно быть

@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrl-100.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrl-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrl-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrl-100.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrl-100.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrl-100.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 100;
  font-style: 100;

}
@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrl-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrl-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrl-300.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrl-300.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrl-300.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 300;
  font-style: 300;
}
@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrl-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrl-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrl-500.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrl-500.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrl-500.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 500;
  font-style: 500;
}
@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrl-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrl-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrl-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrl-700.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrl-700.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrl-700.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 700;
  font-style: 700;
}
@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrl-900.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrl-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrl-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrl-900.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrl-900.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrl-900.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 900;
  font-style: 900;
}
@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('../fonts/MuseoSansCyrillic-100Italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoSansCyrillic-100Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoSansCyrillic-100Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/MuseoSansCyrillic-100Italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoSansCyrillic-100Italic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoSansCyrillic-100Italic.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 100;
  font-style: italic;
}
body {
	font-family: 'Museo Sans Cyrl', sans-serif;
	font-size: 17px;
}
              			 /* Меню */
#header {
	background: url(../img/header.png) no-repeat center top;
	height: 747px;
}
.nav ul {
	margin-top: 32px;
	padding: 0px;
	margin-left: 30px;
}
.nav {
	padding-right: 0px;
}
.nav__main_menu_list {
	float: left;
	display: block;
	font-size: 11px;
	font-weight: 900;
	margin-right: 20px;
	letter-spacing: 0.2px;
}
.nav__main_menu_list a {
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
}
.nav__main_menu_list a:hover {
	background: #386075;
	border-radius: 3px;
	padding: 13px 12px;
	color: #fff;
}
.nav__main_menu_phone img {
	float: left;
	margin-top: 10px;
	padding-right: 15px;
}
.nav__main_menu_phone {
	font-size: 16px;
	font-weight: 900;
	color: #fff;
	margin-top: 15px;
}
.nav__main_menu_list:nth-child(5) {
	padding-right: 0;
}
					 /* Конец Меню */

.heading h1 {
	font-size: 90px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 27px;
	margin-top: 200px;
}
.heading span {
	font-size: 51px;
	letter-spacing: 8px;
}
.heading__img {
	text-align: center;
	margin-top: 110px;
}
.advantages h2 {
	font-size: 42px;
	font-weight: 900;
	text-align: center;
	margin-top: 77px;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.advantages__list {
	background: #f4f4f4;
	text-align: center;
	font-size: 17px;
	font-weight: 100;
	height: 356px;
	width: 360px;
}
.advantages__list h3 {
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.advantages__img_left {
	background: url(../img/advantages_left.png) no-repeat center center;
	height: 80px;
	padding-top: 150px;
}
.advantages__img_top {
	background: url(../img/advantages_top.png) no-repeat center center;
	height: 80px;
	padding-top: 150px;
}
.advantages__img_right {
	background: url(../img/advantages_right.png) no-repeat center top;
	height: 80px;
	padding-top: 150px;
}
.advantages__line {
	background: url(../img/advantages_line.png) no-repeat center center;
	height: 1px;
	margin-top: 20px;
}
.advantages__list p {
	font-size: 17px;
	font-weight: 100;
	margin-top: 15px;
	line-height: 22px;
}
#first {
	background: url(../img/first.png) no-repeat center top;
	min-height: 790px;
}
.move h2 {
	font-size: 42px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-top: 90px;
}
.move blockquote {
	font-size: 18px;
	font-weight: 100;
	font-style: italic;
	color: #fff;
	text-align: center;
}
.move p {
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	letter-spacing: 4px;
	text-transform: uppercase;
}
.move_two {
	border: 1px dashed #fff;
	text-align: center;
	height: 160px;
	margin-top: 55px;
	position: relative;
}
.move_two_up img {
	position: absolute;
	left: 550px;
	top: -15px;
}
.move_two_down img {
	position: absolute;
	left: 550px;
	bottom: -15px;
}	
.move_two p {
	font-size: 19px;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #fff;
	margin-top: 45px;
}
.move_two h3 {
	font-size: 23px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #fff;
}
.move_three h2 {
	font-size: 37px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	margin-top: 50px;
	text-transform: uppercase;
	letter-spacing: 4px;
}
.move_three p {
	font-size: 18px;
	font-weight: 100;
	color: #fff;
	text-align: center;
}
.move_three a {
	font-size: 15px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	border: 2px solid #fff;
	border-radius: 4px;
	padding: 24px 33px;
	text-decoration: none;
	text-align: center;
}
.move_three_button {
	text-align: center;
	margin-top: 50px;
}
.transport__service h2 {
	font-size: 42px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-align: center;
	margin-top: 100px;
}
.transport__service_img {
	position: relative;
}
.transport__service_img_left {
	position: absolute;
	left: 425px;
	top: 90px;
	z-index: 1;
}
.transport__service_img_right {
	position: absolute;
	right: 440px;
	top: 90px;
	z-index: 1;

}
.transport__service_img_top {
	position: absolute;
	left: 480px;
	z-index: 2;
}
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Болгария ждет Вас!</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header id="header">
		<nav>
			<div class="container">
				<div class="row">
					<div class="col-md-2 logo">
						<img src="img/logo.png" alt="logo">
					</div>
					<div class="col-md-7 nav">
						<ul class="nav__main_menu">
							<li class="nav__main_menu_list">
								<a href="#">Главная</a>
							</li>
							<li class="nav__main_menu_list">
								<a href="#">О компании</a>
							</li>
							<li class="nav__main_menu_list">
								<a href="#">ВНЖ и ПМЖ в Болгарии</a>
							</li>
							<li class="nav__main_menu_list">
								<a href="#">Недвижимость и переезд</a>
							</li>
							<li class="nav__main_menu_list">
								<a href="#">Контакты</a>
							</li>
						</ul>
					</div>
					<div class="col-md-3 nav__main_menu_phone">
						<img src="img/phone_icon.png" alt="icon">
						+7 (495) 12-321-345<br>
						+7 (495) 12-321-345
					</div>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-md-12 heading">
					<h1>Болгария<br>
					 <span>ждет Вас</span></h1>
					 <div class="heading__img">
					 	<a href="#"><img src="img/heading.png" alt="d"></a>
					 </div>
				</div>
			</div>
		</div>
	</header>
	<section>
		<div class="container">
			<div class="row">
				<div class="col-md-12 advantages">
					<h2>Наши преимущества</h2>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="advantages__list">
						<div class="advantages__img_left">
							
						</div>
						<h3>Надежность</h3>
						<div class="advantages__line">
							
						</div>
						<p>
							Мы всегда придем к вам на помощь <br>в решении самых неоднозначных<br> вопросов
						</p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="advantages__list">
						<div class="advantages__img_top">
							
						</div>
						<h3>Достоверность</h3>
						<div class="advantages__line">
							
						</div>
						<p>
							Достоверность - главный принцип<br> нашей работы. Мы знаем все тонкости переезда в Болгарию и оформления соответствующих документов
						</p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="advantages__list">
						<div class="advantages__img_right">
							
						</div>
						<h3>Компетентность</h3>
						<div class="advantages__line">
							
						</div>
						<p>
							Наши специалисты с большим опытом работы помогут разобраться во всех юридических тонкостях переезда<br>
							на ПМЖ в Болгарию
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="first">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="move">
						<h2>Переезд в Болгарию</h2>
						<blockquote>«Если Вам не нравится то место, где вы находитесь -<br> 
						смените его, Вы же не дерево»</blockquote>
						<p>Джим Рон</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="move_two">
						<div class="move_two_up">
							<a href="#"><img src="img/move_two.png" alt=""></a>
						</div>
						<p>Пришло время и перед Вами стоит вопрос</p>
						<h3>Как переехать в Болгарию на ВНЖ или ПМЖ?</h2>
						<div class="move_two_down">
							<a href="#"><img src="img/move_two.png" alt=""></a>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="move_three">
						<h2>Мы знаем ответ</h2>
						<p>Подберем для Вас оптимальный вариант и предложим лучшие условия!
						</p>
						<div class="move_three_button">
							<a href="#">Узнать больше</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="four">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="transport__service">
						<h2>
							Недвижимость и транспортные услуги
						</h2>
						<div class="transport__service_img">
							<div class="transport__service_img_left">
								<img src="img/transport__service_img_left.png" alt="">
							</div>
							<div class="transport__service_img_top">
								<img src="img/transport__service_img_top.png" alt="">
							</div>
							<div class="transport__service_img_right">
								<img src="img/transport__service_img_right.png" alt="">
							</div>
						</div>
						<div class="transport__service_block">
							<div class="transport__service_block_up">
								<h3>Мечтаете о доме на солнечном берегу?</h3>
								<p>
									Или хотите выгодно инвестировать в  заграничную недвижимость? В любом случае - подходящий вариант уже ждет Вас! Большой выбор объектов жилой и коммерческой недвижимости и профессиональный сервис позволит провести сделку с удовольствием и получить нужный результат
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
</html>

2
  • Юзайте z-index;
    – midia
    27 июл 2018 в 4:38
  • как z-index может повлиять на ситуацию? Мне нужно чтобы блок просто разместился ниже. Чтобы не подгонять его марджинами, может есть более рациональный способ.
    – Roman
    27 июл 2018 в 4:42

1 ответ 1

0

Пример

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.block {
  text-align: center;
  padding: 1rem;
}

.block__title {
  font-size: 3rem;
}

.block__circles {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0 -35px;
}

.block__circle img {
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}

.block__circle:nth-of-type(2) {
  margin: -35px -25px 0;
  position: relative;
  z-index: 1;
}

.block__inner {
  background: #f7f7f7;
  padding: 3rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
<div class="container">

  <div class="block">
    <h2 class="block__title">Title</h2>

    <div class="block__circles">
      <div class="block__circle">
        <img src="http://via.placeholder.com/100x100">
      </div>
      <div class="block__circle">
        <img src="http://via.placeholder.com/100x100/fffff/00000">
      </div>
      <div class="block__circle">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="block__inner">
      <h3>Title</h3>
      <p>Картинки с абсолютным позиционированием, как сделать, чтобы следующий блок разместился под картинками? Он размещается перед ними.</p>
    </div>
  </div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.