0
Я пытаюсь играть с позиционированием в css, и я заметил что-то, что меня смутило. Это, наверное, глупый вопрос ... но мне трудно понять это.Создание div-элемента inline
Я создал три divs с шириной и высотой 50 пикселей с различными цветами фона. Когда я устанавливаю третий div -60px с использованием margin-top, третий div находится поверх второго div. Тем не менее, когда я делаю первый и второй div-inline-элементы, то оба первых двух divs теперь находятся поверх третьего.
Может кто-нибудь объяснить мне эту концепцию?
<head>
<style>
<!-- Divs with the same width and height. Second one where both the first two divs are inline below this one. -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
<head>
<style>
<!-- First two divs are inline -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#one, #two{display:inline-block;}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
Вы спрашиваете, как исправить? Как | 1 ontop | 2 за первый | 3 Last –
Да, возможно ли иметь третий div поверх двух других div, которые являются встроенными блоками? – user3029001