web-dev-qa-db-ja.com

絶対位置は幅に影響しますか？

私はcssに不慣れです。 div要素の位置を絶対に変更すると、div要素の幅が変わるのはなぜですか？ Chrome v25.0.1364.172mとIE9で試してみましたが、どちらも同じ結果になります。

簡単な例：

<!doctype html/>
<html>
<head>
    <title>test</title>
    <style>
        div {
            position:relative;
            border-width: 1px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>
csspositionwidthabsolute
15
lee23

絶対配置された要素はブロックレベルの要素として動作せず、通常のa<div>doesのように次々に流れないためです。

含まれているものに応じて、絶対位置にあるdivの幅と高さを設定する必要があります。

絶対的に配置された要素は、それが含まれる最初の親要素を基準にして配置されます。したがって、簡単な例：

単純な「落とし穴」は、親要素にposition: relative;を持つように設定していません

<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">

    <!-- I'm a child of the above parent element -->
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
         I'm positioned absolutely to my parent. 
    </div>

</div>
25
SMacFadyen

絶対位置を指定する要素は、親から幅を取り、ブロック要素として動作しなかったためです。

0
Aladdin Ahmed Muhammad

SMacFadyenが言ったように、最も可能性の高い原因はcontainerの相対的な位置が欠落していることです。ただし、containerが相対位置にあり、幅が狭く、innerコンテンツが絶対位置にある場合、左または右を使用して内部コンテンツを配置すると、そのコンテンツが複数行に分割されることがあります。このシナリオでは、 white-space property をnowrapまたはニーズに適した他のオプションに変更する必要があります。

0
Tiagojdferreira