css – 绝对位置影响宽度?

前端之家收集整理的这篇文章主要介绍了css – 绝对位置影响宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新来的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>

解决方法

Because absolutely positioned elements do not behave as block level
elements and do not flow after each other like normal a<div>does.

您将需要为绝对定位的div设置宽度和高度,具体取决于它所包含的内容.

您绝对定位的元素将相对于其所在的第一个父元素进行定位.因此,一个简单的示例:

一个简单的“getcha”不是将父元素设置为具有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>
原文链接:https://www.f2er.com/css/214554.html

猜你在找的CSS相关文章