CSS定位

来源：互联网发布：矩阵霸主音响套装编辑：程序博客网时间：2024/06/07 18:28

定位

利用地位，可以准确地定义元素框相对于其他正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位的类型

主要讲两个：

一个是absolute 一个是relative

relative：

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

<!DOCTYPE html><html><head><title>position</title><style type="text/css">#box1{width: 100px;height: 100px;background-color: blue;position: relative;float: left;left: 30px;top: 50px;}#box2{width: 100px;height: 100px;background-color: red;float:left;}</style></head><body><div id="box1"></div><div id="box2"></div></body></html>

蓝色是方框是相对原来位置进行偏移

原本占有的位置是存在的，所以红色是浮动不过去。

再看absolute：

元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素是不存在一样。元素定位后会产生一个块级框，而不论原来它在正常流中生成何类型的框。

<!DOCTYPE html><html><head><title>position</title><style type="text/css">#box1{width: 100px;height: 100px;background-color: blue;position: absolute;float: left;left: 30px;top: 50px;}#box2{width: 100px;height: 100px;background-color: red;float:left;}</style></head><body><div id="box1"></div><div id="box2"></div></body></html>

因为absolute，元素框已经从文档流删除了，所以红色块的右边其实是没有东西的了，所以向左浮动会浮动过去。

包含块：

对于浮动元素，其包含块定义为最近的块级祖先元素。在定位里，CSS2.1定义了以下行为

1、“根元素”的包含块由用户建立，在html中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形。

2、对于一个非根元素，如果其position值是relative或者static，包含块则由最近的块级框。表单元格或者行内祖先框的内容边界构成。

3、对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素。在这个过程如下：

1、如果这个祖先是块级元素，包含块则设置为该祖先元素的内容边界；换句话说，就是由边框界定的区域。

2、如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界。包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界，包含块的下和右边界。包含块的右边界对应的第一个框的右内容边界，包含块的左边界则取最后一个框的左内容便捷。上下边界也是一样。

3、如果没有祖先，元素的包含块定义为初始包含块

阅读全文

0 0