您的位置：首页 > 其它

绝对定位（absolute）与相对定位（relative）学习心得

2015-06-27 22:59 357 查看
最近在学习CSS，一直对绝对定位和相对定位的理解不是很清楚，今天自己根据网上的资料，做了一些实验，才算对定位有了一些初步的理解（因为单纯的看网上的教程，还是不能真正理解）。

绝对定位（absolute）

1、绝对定位就相当于你把定位的元素从文档中抠了出来，那么这个元素原来的位置就空了出来，可以由别的元素来占据。那么被抠出来的元素放在那里呢？这就是绝对定位的意义了，就如w3school中写的那样：

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

其中的一句话：将布局的一部分与另一部分重叠。 这就是绝对定位 的意义。你抠出来的元素就相当于可以在原来文档那一层的上层进行放置（布局）。

那么这里就涉及到了一些问题，我用来定位的top，left，right和bottom对于设置了绝对定位（absolute）的元素来讲是怎样的呢？这个问题也是困扰了我挺久的。通过自己写了一些代码和看了一些资料，终于明白了。

2、如果你把一个元素设置为absolute，其他的属性（top，left，right和bottom）不进行设置，那么它只会被抠出来，其他元素占据它的位置，除此之外，没有其他任何变化。就是说，当一个元素被设置为absolute后，它的默认的top，left的值并不是0，而是被抠出来之前（被设置为absolute之前）的值，该在哪个位置，还是哪个位置。

那这时你可能会遇到新的问题，那我要自己设置top，left的值，到底相对的是哪个元素？是它的父元素吗？怎么看了这么多资料还是不明白呢？没事，您继续往下看。

3、如果我想设置定位方式为absolute的元素的top和left值，那么它相对的是第一个设置了定位方式（除static外）的父元素，为什么除static，因为元素的默认定位方式是static，设置为static相当于没有设置。那么有人要问，如果是inherit定位方式呢，那么你就要看看继承下来之后是什么了，具体问题具体分析，但原则不变。如果所有的父元素都没有设置呢？那就是body元素了（在Chrome浏览器是这样的，其他浏览器没有实验）。

至此，你可能对绝对定位的一些不理解的地方也差不多理解的差不多了。那你又要问了，为什么有些视频教程上设置元素为绝对定位时，总是把直接父元素设置为相对定位（relative）呢？下面就涉及到了相对定位。

相对定位 （relative）

1、那么到底什么是相对定位呢？看w3school中的解释：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

以及：

生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

这些解释说了意思就是，如果一个元素被设置成了relative，它也相当于被抠了出来，但是它原来的位置不会被别的元素占据。这是与absolute不一样的地方。那么我自己设置被设置为relative的元素的top和left的值时，相对的元素就是元素自身。

那到底为什么设置元素为绝对定位时，总是把直接父元素设置为相对定位（relative）呢？

2、我也说不出来为什么，但是有一点感觉就是为了定位的方便。（感觉自己说了废话）。你要知道，如果一个元素被设置为relative，那么它默认的top值和left值时0。这也是与absolute不同的地方。就是说你把一个元素设置为relative，其他的值不进行设置，它还是会在原来的位置。不会改变。只是给他设置了一个定位方式，它不再是默认的static了。那么它的子元素进行绝对定位时就能相对与这个父元素进行了。不用去费劲找父元素了。我只要设置相对这个父元素的绝对定位就行了。那你说父元素也可以设置为其他的定位方式啊，是的，所以我也不太清楚到底是为什么。还是等大牛来解答这个疑惑吧。

不过至少你弄清楚了这个绝对定位和相对定位到底相对的是什么。

附上实验用的代码，真的超级简单，都不好意思往上传，要是有真心不知道怎么实验的朋友，可以看看。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定位方式</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="ancestor">
<div class="parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
</div>
</div>
</body>
</html>


*{
margin: 0px;
padding: 0px;
}
.ancestor{
width: 400px;
height: 750px;
border: 1px solid red;
margin-left: 20px;
margin-top: 20px;
position: absolute;
}
.parent{
width: 350px;
height: 700px;
margin-left: 30px;
margin-top: 30px;
border: 1px solid blue;
position: absolute;
}
.box{
width: 300px;
height: 150px;
border: 1px solid black;
}
.box3{
position:relative;
top: 0px;
left: 0px;
}


这些是我自己的一点心得，帮助一些刚刚入门的朋友，知识点不是很多。

如果有错误还请各位朋友批评指正。感谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航