web-dev-qa-db-ja.com

ある要素を別の要素の下に配置するにはどうすればよいですか？

ある要素を別の要素の下に置きたい。私は使っている position: absoluteの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>

青いボックスを赤いボックスの下に配置したい。どうすればこれを達成できますか？

htmlcsspositionabsolute
10
khalid J-A

2番目のdivおよびtop：315pxに対する相対的な位置を指定するだけです。

.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>
14
Mudassar Saiyed

解決策は次のとおりです。

.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>

positionはブロック要素であり、デフォルトで新しい行に配置されるため、divをポイントしないようにすることができます。

.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>
5
Banzay