您的位置：首页 > Web前端 > CSS

CSS中的position属性（定位）

2017-06-04 09:37 441 查看

1、属性的定义

relative: 位置被设置为 relative（相对定位）的元素，可将其移至相对于其正常位置的地方，因此 "left:20px" 会将元素移至元素正常位置左边 20 个像素的位置。

absolute：位置设置为 absolute （绝对定位）的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。

fixed: 位置被设置为 fixed（固定定位）的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

2、技巧：

relative：用这个属性最好先不定位，先找到其正常该出现的位置，再定位！

absolute：

a、看包含它的元素有没有定位，如果没有定位则按照body来定位；如果包含它的元素(div)已经定位，则按照该元素(div)来进行定位。

b、默认大小是被其内容(或其包含的元素撑大)

以下附上自己的实验代码，以供参考！！

（按照标注的步骤解开相应的代码，并注释其他步骤的代码）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>relative属性的实例</title>
<style type="text/css">
/*第一步*/
/*div#div2 {
border: 1px solid red;
}*/
/*第二步*/
/*div#div2 {
position: relative;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第三步*/
/*div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第四步*/
/*div#div2 {
border: 1px solid red;
}
div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第五步*/
div#div2 {
position: relative;
top: 10px;
left: 100px;
border: 1px solid red;
}
div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}
</style>
</head>

<body>
<div id="div0">
<div id="div1">
123123
</div>
<div id="div2">
asdasd
</div>
</div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>absolute属性的实例</title>
<style type="text/css">
/*第一步*/
/*div#div2 {
border: 1px solid red;
}*/
/*第二步*/
/*div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第三步*/
/*div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第四步*/
/*div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第五步*/
/*div#div2 {
border: 1px solid red;
}
div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第六步*/
div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}
div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}
</style>
</head>

<body>

<div>
12312312313
</div>
<div id="div0">
<div id="div1">
123123
</div>
<div id="div2">
asdasd
</div>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航