web-dev-qa-db-fra.com

Comment puis-je positionner un élément sous un autre?

Je veux mettre un élément sous un autre élément. J'utilise position: absolute en CSS.

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
    <div class="first"></div>
    <div class="second"></div>

Je veux que la boîte bleue soit placée sous la boîte rouge ... Comment puis-je atteindre cet objectif?

htmlcsspositionabsolute
5
khalid J-A

donnez juste la position: par rapport à la deuxième division et en haut: 315 pixels

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
	position: relative;
    top: 315px;
}
<html>
<head>

</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</head>

10
Mudassar Saiyed

Voici une solution:

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
     box-sizing: border-box;
}
.second{
    position: relative;
    border:2px solid blue;
    width:40%;
    height:200px;
    top: 300px;
    box-sizing: border-box;
}
<div class="first"></div>
    <div class="second"></div>

Et vous pouvez ne pas pointer position, car div est un élément de bloc et sera placé à la nouvelle ligne par défaut.

.first{
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
<div class="first"></div>
<div class="second"></div>

1
Banzay