Размещение div на другом div

Это код HTML и код CSS.Размещение div на другом div

#header { 
 
    height: 75px; 
 
} 
 
#right { 
 
    height: 75px; 
 
    width: 700px; 
 
    float: right; 
 
} 
 
#top { 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 
#bottom { 
 
    height: 800px; 
 
    background-color: silver; 
 
} 
 
#main { 
 
    height: 850px; 
 
    width: 950px; 
 
    background-color: #F3ECEA; 
 
    margin: auto; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" type="text/css" href="design.css"> 
 

 
<body> 
 
    <div id="main"> 
 
    <div id=header> 
 
     
 
     <div id="left"></div> 
 
     <div id="right"></div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
    <div></div> 
 
    
 
    <div id="top"></div> 
 
    <div id="bottom"></div> 
 
    
 
</body> 
 

 
</html>

Я пытаюсь поместить #main DIV по центру веб-страницы, а также она должна быть выше #top и #bottom дивы. Я пробовал z-index, но это не сработало. При использовании z-index я смог разместить #main div на #top и #bottom div, но margin:auto не работает. При использовании верхних и нижних атрибутов для position:absolute я смог разместить #main div, но изменение размера окна делает его другим. Я хочу, чтобы div #main находился над разделом #bottom и #top, а также в центре страницы даже после изменения размера страницы.

источник

2016-08-05 reswanth

Пожалуйста, поделитесь изображение как бы вы ожидать, что она будет оказана. – sarbbottam

z-index должен работать, чтобы управлять divs относительно одного, находящегося впереди другого. Причина изменения вашего центрирования и других аспектов при изменении разрешения экрана, т. Е. Минимизации и т. Д., Заключается в том, что вы определили все свои css с px, а не процентом. Измените свою маржу и т. Д. На проценты, и она должна работать.

источник

2016-08-05 17:10:09 Alan

В принципе, для размещения #main div над верхними/нижними divs, вы просто добавляете z-index из 1 на него.

К центру #main с абсолютным положением необходимо указать значение 0 для свойств слева и справа и добавить auto для поля.

See fiddle

источник

2016-08-05 18:40:09 TGEE

код рушится из-за ваш поплавок примененного, поэтому изменение вещи не дают вам желаемый эффект. Откройте свои инструменты dev (F12) в хроме, и вы можете проверить элементы, чтобы увидеть, где они сидят.

Я бы предложил добавить clearfix в родительский div, если вы собираетесь плавать.

, если быть честным, я немного смущен, где вы хотите, чтобы ваши дивизии были, не могли бы вы разместить фотографию?

источник

2016-08-05 21:33:44

iam пытается создать веб-страницу whatsapp. у нас есть главный div, в котором мы болтаем, который выровнен по центру окна над двумя другими div. – reswanth

Чтобы разместить #main over #top и #bottom просто используйте z-index. Более высокий z-индекс для #main. Нижнее значение для #top и #bottom.

Для центрирования #main в использовании страницы,

margin-top: calc(50vh - 425px); 
margin-left: calc(50vw - 475px);

В.Х. обозначает высоту окна просмотра, и для ширины VW окна просмотра. Функция calc() будет динамически вычислять значения верхнего и левого полей при изменении размера окна.

Ссылка:

Подробнее о CSS единицах здесь - CSS Units.
Подробнее о CSS функции известково здесь - CSS calc() Function

источник

2016-08-05 22:07:35

Размещение div на другом div

ответ

Смежные вопросы