1 position 属性的作用

position属性用来指定一个元素在网页上的位置，一共有4种定位方式，即position属性主要有4个值。

static
relative
fixed
absolute

2 static 属性值

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

3 relative，absolute，fixed

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

3.1 relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

div {
position: relative;
top: 20px;
}
上面代码中，div元素从默认位置向下偏移20px（即距离顶部20px）。

3.2 absolute 属性值

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

/*
HTML 代码如下

#father {
positon: relative;
}
#son {
position: absolute;
top: 20px;
}

上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。

注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

3.3 fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

div {
position: fixed;
top: 0;
}
上面代码中，div元素始终在视口顶部，不随网页滚动而变化。

【响应式Web前端设计】CSS 定位详解相关推荐

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
【响应式Web前端设计】CSS后代选择器和子代选择器
文章目录子代选择器:>号后代选择器:空格文章目录子代选择器:>号后代选择器:空格子代选择器:>号 .father>div{border: 2px solid blu ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
【响应式Web前端设计】Register Demo
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用户 ...
【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...

【响应式Web前端设计】CSS 定位详解

文章目录