Javascript-форум - Динамическое изменение отступа блока сверху окна браузера

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Динамическое изменение отступа блока сверху окна браузера (https://javascript.ru/forum/misc/70653-dinamicheskoe-izmenenie-otstupa-bloka-sverkhu-okna-brauzera.html)

Динамическое изменение отступа блока сверху окна браузера

Такой вопрос:
У меня есть в верстке абсолютно позиционированный блок(слайдер), за ним идет следующий блок (main), обычное позиционирование. Мне надо чтоб блок main отступал сверху на высоту блока слайдера + высота верхнего меню (110px).

Есть такой код:

'use strict'
var heightImg = $('#carousel-img').height();
//console.log( heightImg);
var heightTop = heightImg + 110;
$('main').offset({top:heightTop});

Блок main отступает на высоту блока слайдера,что надо. Но мне надо, чтоб это происходило динамически. Т.е. при изменении ширины экрана менялся и отступ.
У слайдера высота не фиксированная.Высота слайдера зависит от высоты картинки(тег img).

Помогите пожалуйста, я не знаю как сделать можно.

Цитата:

Сообщение от Tanya51

я не знаю как сделать можно

Например не использовать абсолютное позиционирование... Пусть эти два элемента будут в одном потоке - тогда один будет влиять на другой...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.slider{
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}
		img{
			display: block;
			position: relative;
			width: 100%;
		}
		.main{
			margin-top: 110px;
			height: 100px;
			background-color: blue;
			color: white;
		}
		.hid{
			visibility: hidden;
		}
		.wrap{
			position: relative;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="slider"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="main">main</div>
</div>
</body>
</html>

Вот вам решение без JS

меню приделал для наглядности

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		font-size: 30px;
	}
	.slider{
		margin-top: 110px;
		top: 0;
		left: 0;
		position: absolute;
		width: 50%;
	}
		img{
			display: block;
			position: relative;
			width: 100%;
		}
		.main{
			height: 100px;
			background-color: blue;
			color: white;
		}
		.hid{
			width: 50%;
			visibility: hidden;
		}
		.wrap{
			position: relative;
		}
		.menu{
			background-color: green;
			height: 110px;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="menu">Меню</div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="slider"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="main">main</div>
</div>
</body>
</html>

Еще можно

display:flex;
flex-direction:column;

спасибо всем.
Буду разбираться.
А про flex я чего-то даже и не вспомнила))