CSS中关于定位的那些问题

来源：互联网发布：有哪些网络调查网站编辑：程序博客网时间：2024/05/18 02:13

今天在写一个页面的时候，想通过margin：0 auto;来对一个元素进行水平居中，结果发现无法实现，但是当我把定位改成绝对定位以后又可以实现了。然后我发现如果我想对绝对定位的元素实现水平居中的话除了设置margin：auto 以外还需要吧left和right都设置为0；

遂复习一下CSS里的定位

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

表来源于w3school

absolute不占用文档流，相对于父元素定位

relative占文档流，

默认的static无法设置left等属性

fixed相对于浏览器窗口定位

inherit是当前元素继承父元素的定位

关于相对定位想说一点小坑，，，刚学的时候被这个东西坑过。。。。。。感觉算是容易用错的东西吧

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>section{width: 200px;height: 200px;position: relative;border: 1px solid black;}.section_1{top: 100px;}.section_2{}</style></head><body><section class="section_1"></section><section class="section_2"></section></body></html>

看这一段代码，还记得一开始的我天真的以为第二个section会紧跟在第一个section后面

然而事实是会重合。原因就是因为相对定位设置left等属性时时根据自己应该所在的正常位置来定位的，第二个section的正常位置就是如图所示的位置，就是说他并不会理会第一个section中的top:100px;

这也是为什么你对相对定位的元素使用right:0;你会发现他并不会像你期望的那样跑到父元素的右边去，正是因为他是根据自己所处的正常位置来定位，不是根据父元素。你让他相对于正常位置（即现在所在的位置）right为0，自然就是保持原样不动了。。。

再说关于绝对定位的一些坑。

1.用了绝对定位再用float，float是无效的。同理fixed和float也一样。因为绝对定位和float都使元素脱离正常的文档流。一个通过top，left等属性来控制元素位置。一个尽量让元素往父元素的某一侧靠近，这本来就是冲突的，所以float会无效。

2.用了绝对定位的情况下，仅仅使用margin: 0 auto; 语句是无法让元素水平居中的，再加上left:0; right:0语句即可。

这些都是以前碰到过的一些小坑，，想来真的是对于这些基础的东西没有仔细理解过才会出现这些愚蠢的错误吧。

一开始关于这几个定位的描述不知道看了多少遍了，却依然没有了解。。。。。。

所以啊。。。。深感学习这东西还是要多实践，在实践中找到问题的所在。。。。。。。。不过像我这样的大马虎估计也没谁了吧哈哈哈哈！

阅读全文

0 0