CSS元素定位

Posted 2020-08-05

1、块级元素、行内元素、文档流

通过对每个盒子的外边矩、边框、内边矩、内容、位置的精确控制，CSS可以实现复杂而精准的页面布局。

块级元素，这类元素默认有换行效果，典型的如div

行内元素，这类元素默认没有换行效果，典型的如span

文档流，html元素在页面上显示时，根据在源码中出现的顺序，按照从上到下、从左到右、块级元素独占一行、行内元素不换行的规则依次排列。在文档流中的元素会对后续元素的位置产生影响。

2、盒子定位

2.1、相对定位

元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就是说后面的元素还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）

2.2、绝对定位

以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素，则以浏览器窗口为基准），元素本身脱离文档流，也就是说后面的元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块级元素独占一行的性质了）

2.3、固定定位

和绝对定位类似，也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随着滚动条移动

3、定位使用的css属性

3.1、position

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

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

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

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

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

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

（4）static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

3.2、top,right,bottom,left

(1)auto

默认值。通过浏览器计算上边缘的位置。

(2)%

设置以包含元素的百分比计的上边位置。可使用负值。

(3)length

使用 px、cm 等单位设置元素的上边位置。可使用负值。

3.3、verflow

（1）visible

默认值。内容不会被修剪，会呈现在元素框之外。

（2）hidden

内容会被修剪，并且其余内容是不可见的。

（3）scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

（4）auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

3.4、vertical-align

（1）baseline

默认。元素放置在父元素的基线上。

（2）top

把元素的顶端与行中最高元素的顶端对齐

（3）middle

把此元素放置在父元素的中部。

（4）bottom

把元素的顶端与行中最低的元素的顶端对齐。

（5）z-index

number 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意：z-index只对进行了定位的元素有效，对于文档流中的元素无效

3.5、float浮动

（1）如果一个盒子向左浮动（float:left;）：这个元素会成为行内元素；它后面的块级元素会失去一半的独占一行的特性，即左边紧靠在浮动元素后面，右边延伸到行尾。向右浮动和向左浮动效果类似

（2）可以使用clear:both;清除浮动效果对后面盒子的影响

如何获得元素在页面中的坐标 HTML所有的元素都具有下面这5个只读属性 offsetLeft 元素边框距页面左边界的距离 offsetTop 元素边框距页面上边界的距离 offsetWidth 元素的宽度（左右边框的跨度） offsetHeight 元素的高度（上下边框的跨度） offsetParent 返回已经定位的祖先元素，如果没有，则返回body或null。