CSS中position的4种定位详解

大家都知道，css中的position有4种取值，分别是static、fixed、relative、absolute。

详细解释：

static：相当于没有定位，元素会出现在正常的文档流中。

fixed：元素框的表现类似于absolute，但是fixed是相对于视窗本身，也就是浏览器窗口而定位的。所以，采用该定位的元素在页面下拉的时候，其位置并不会发生变化。

relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。

absolute：生成绝对定位的元素，相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位，所以absolute定位实际上就是相对于有定位的第一个祖先元素定位，如果所有的祖先元素都没有定位，则相对于初始包含块或者画布，一般就是body元素定位。

转载于:https://www.cnblogs.com/LuckyWinty/p/5272930.html

CSS中position的4种定位详解相关推荐

css中position的两种定位（absolute、relative）
[position:absolute] 意思是:绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 如果没有TRBL,以父级的左上角,在没 ...
css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...
CSS的几种定位详解
CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助,下面就进行详细介绍:定位分为静态定位,相对定位,绝对定位,固定定位这四种,定位有不同的参数,例如:left.right.top.bottom. ...
CSS中常用的几种定位方式
定位的基本语法: position:方式 top: 多少px; right: 多少px; left: 多少px; bottom: 多少px; 有常用的几种方式,如下: 第一种:相对定位 relativ ...
css中“[]”、“”“~”、“，”、“+”和“”详解
p~ul{background:#8e8e8e; } <p>段落P</p> <ul><li>列表项1</li><li>列表项2& ...
java中synchronized的三种写法详解
预备知识首先,我们得知道在java中存在三种变量: 实例变量 ==> 存在于堆中静态变量 ==> 存在于方法区中局部变量 ==> 存在于栈中然后,我们得明白,合适会发生高并发 ...
CSS中特性查询（@supports）详解及使用
1. 简介 CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性.其实就是条件判断,如果支持某个属性可以写一套样式,如果不支持某个属性,可以提供另外一套样式作为替补.可以放在代码 ...
css 中多个class选择器的详解
ml中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式<div class="contain ...
CSS中#号、.号、*号详解
#: #号的作用是控制对应div的css样式,具体事例如下: HTML代码: <div id="jinghao"> </div> CSS代码: #jingh ...

CSS中position的4种定位详解

CSS中position的4种定位详解相关推荐

最新文章

热门文章