CSS 布局的position属性、float属性

时间 2019-11-24

标签 css 布局 position 属性 float 栏目 CSS 繁體版

原文原文链接

CSS 布局通常是后写的带有定位属性的元素层级大于先写的（或者没有设置的）定位属性层级，后者会覆盖在前者上层。html

position属性

position属性指定一个元素（默认静态的，能够有相对，绝对或固定）的定位方法的类型。默认值static：没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。bash

position:relative

生成相对定位的元素，相对于其正常位置（就是元素本身原本的位置）进行定位。在文档流中仍然占有空间，其参考对象是离该元素最近的父元素。所以，样式布局

position:relative;
left:20px;
复制代码

向元素的原始左侧位置增长 20像素（元素发生的右移20像素）。spa

position:relative;
left:-20px;
复制代码

从元素的原始左侧位置减去 20 像素（元素发生的左移20像素）。
同理元素的top, bottom, right位置属性同样存在这样的原理。code

假设元素是在左上角（0，0）位置，（此处位置坐标只是举例说明，不表明真实坐标）
设置left:20px;此时向右为x轴正方向，元素相对原点（0，0）向右移动20像素；
设置right:20px;此时向左为x轴正方向，元素相对原点（0，0）向左移动20像素，此时元素是不显示在屏幕上，位置是屏幕外的；
设置top:20px;此时向下为y轴正方向，元素相对原点（0，0）向下移动20像素；
设置bottom:20px;此时向上为y轴正方向，元素相对原点（0，0）向上移动20像素，此时元素是不显示在屏幕上，位置是屏幕外的；htm

position:absolute

生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位，脱离文档流。绝对定位的元素的位置相对于最近的已定位父元素，若是元素没有已定位的父元素，那么它的位置相对于<html>。若是设置了position:absolute，而不设置"left", "top", "right"，"bottom"属性，也是没有脱离文档流的。元素的位置经过 "left", "top", "right" 以及 "bottom"属性进行规定。
注意：absolute 定位使元素的位置与文档流无关，所以不占据空间。
absolute 定位的元素和其余元素重叠。对象

绝对定位是相对窗口的四个顶点为原点的，在<body>下的<div>设置如下属性文档

position:absolute;
left:100px;
top:150px;
复制代码

相对左上角，距离窗口左边100 px和距离窗口顶部150 px。it

position:absolute;
right:100px;
bottom:150px;
复制代码

相对右下角，距离窗口右边100 px和距离窗口底部150 px。想相对父元素设置相对定位，父元素也必须设置定位属性。

position:fixed

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置相对于浏览器窗口是固定位置，脱离文档流。即便窗口是滚动的它也不会移动。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
固定定位也是相对窗口的四个顶点为原点的，与绝对定位同样，在<body>下的<div>设置如下属性

position:absolute;
right:100px;
top:150px;
复制代码

相对右上角，距离窗口右边100 px和距离窗口顶部150 px。

position:absolute;
left:100px;
bottom:150px;
复制代码

相对左下角，距离窗口左边100 px和距离窗口底部150 px。
可是不受限与父元素，父元素是否设置定位属性都不影响固定定位的元素位置

float属性

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽可能向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。重要的是任何被声明float的元素都会自动被设置成块元素