[CSS] 定位和清除浮动_html/css_WEB-ITnose
定位
盒子的位移属性 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 常用于在页面低端呈现横幅,例子如下:
footer { bottom: 0; left: 0; right: 0; position: fixed;}
z-index
要设置 z-index 属性,首先要设置 position 属性为 relative absolute fixed 之一。一般来说,元素出现的时候就放置在 z 轴上。先出现的元素要低于后出现的。可以直接使用 z-index 来控制这种层叠顺序。元素的 z-index 值越高将会出现在越上面。
清除浮动
Box 1
推荐阅读
-
css清除浮动的原因和方法
-
CSS 定位和浮动
-
CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
-
html/css中相对定位relative和绝对定位absolute的用法
-
css3中的content和实体_html/css_WEB-ITnose
-
jinja2模版生成页面时会产生大量空行和空格,如何移除?_html/css_WEB-ITnose
-
CSS 过滤器 兼容ie,火狐和谷歌_html/css_WEB-ITnose
-
使用 XPATH 和 HTML Cleaner 解析 HTML/XML(Using XPATH and HTML Cleaner to parse HTML / XML)_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
CSS 浮动_html/css_WEB-ITnose