欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

[CSS] 定位和清除浮动_html/css_WEB-ITnose

程序员文章站 2022-05-22 12:24:35
...

定位

盒子的位移属性 top right bottom left 用于指定元素的位置和方向,这些属性只能在元素的 position 属性设置了 relative absolute fixed 的值时生效。

对于relative ,位移属性指的是元素目前位置到原位置的偏移量,即元素与其原位置的边缘之间的距离。

对于absolute fixed ,位移属性指的是元素与父元素的边缘之间的距离。( absolute 根据的是非 static 父元素,或者 body , fixed 根据的是浏览器窗口)

static

元素都有 position 属性,其默认值是 static ,这也意味着,它们没有也不接受位置属性设置。( top right bottom left )

relative

relative 元素在页面中仍是正常的、静态的,属于自然流。其他元素不会占用其原来的位置。

如果同时设置了 top bottom , top 优先级高于 bottom 。

如果同时设置了 left right ,取决于页面所用语言是从左到右 ltr 还是 从右到左 rtl 。

absolute

absolute 元素会脱离文档流。 absolute 元素需要至少一个祖先元素设置了 relative 或 absolute 属性,不然元素定位会相对于页面的主体 body 进行定位。

使用了 absolute 的元素可以指定垂直和水平的位移属性,使 absolute 元素相对于设置了 relative 的祖先元素边缘进行移位。负的位移属性会使元素移到盒子外面。

例如,如果一个absolute元素设置了 top 值为 50px 和 right 值为 100px , absolute 元素会相对于其设置了 relative 的父元素的顶边向下移动 50px ,相对于父元素的右边向左移动 100px 。

但是,如果使用了 absolute 的元素没有进行任何盒子位移属性设置,那么 absolute 元素的顶部和左部会和设置了 relative 的父元素的顶边和左边重合。如果设置了一个盒子位移属性,比如说 top ,那么absolute元素垂直方向会进行移动,而水平位置默认还是左对齐。

当一个 absolute 元素没有明确指定高度和宽度,同时使用盒子位移的 top 和 bottom 属性时,会使元素的高度跨越整个容器。同样的,当这个元素同时使用位移 left 和 right 属性值,会使元素的宽度跨越整个容器。如果同时使用四个位移属性,会使元素的高度和宽度跨越整个容器。这个时候 absolute 元素的宽度和高度都是 100% 。

fixed

fixed 元素会相对于浏览器窗口进行定位,并且不会随滚动条进行滚动。

fixed 常用于在页面低端呈现横幅,例子如下:

FixedFooter

footer {  bottom: 0;  left: 0;  right: 0;  position: fixed;} 

z-index

要设置 z-index 属性,首先要设置 position 属性为 relative absolute fixed 之一。一般来说,元素出现的时候就放置在 z 轴上。先出现的元素要低于后出现的。可以直接使用 z-index 来控制这种层叠顺序。元素的 z-index 值越高将会出现在越上面。

清除浮动

Box 1