绝对位置影响宽度？ [英] absolute position affects width?
问题描述
我是新的css。我想知道为什么当我将div元素的位置更改为绝对，div元素的宽度更改？试用它在Chrome v25.0.1364.172m和IE9，两者都有相同的结果。
I am new to css. I am wondering why when I change the positioning of the div element to absolute, the width of the div element changes? Tried it out in Chrome v25.0.1364.172m and IE9, both have the same outcome.
简单示例：
<!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>
推荐答案
不像块级别
元素那样表现，不像正常的< div>那样流动。
您将需要为绝对定位的div设置宽度和高度，具体取决于它包含的内容。
You will need to set a width and a height for a div that is absolutely positioned, depending what it contains.
你绝对定位的元素相对于它所在的第一个父元素的位置。所以，一个简单的例子：
Your absolutely positioned element will position relative to the first parent element it is in. So, a simple example:
一个简单的gotcha有 position：relative;
A simple 'gotcha' is not setting the parent element to have 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>
这篇关于绝对位置影响宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
