22

私は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>
4

3 に答える 3

33

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

内容に応じて、絶対配置された 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>
于 2013-04-02T11:40:47.520 に答える
0

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

于 2018-01-12T20:20:31.567 に答える