Position属性值的相关解析

前言：本人是新生小白，如有错误之处欢迎指出

position的属性值有：
1. absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位(会脱离文档流)

2. fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。(会脱离文档流)

3. relative：相对定位，是相对于其原本的位置来定位的。(不会脱离文档流)

4. static：默认值，没有定位。

5. Inherit：继承父元素的position值。

首先来看position： relative 相对定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>position</title><style>div {height: 50px;width: 50px;}.div1 {background-color: red;}.div2 {background-color: green;}.div3 {background-color: blue;}</style>
</head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body></html>

接下来我们对div2使用相对定位，增加样式position: relative;（相对定位）

top: 22px;left: 33px;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>position</title><style>div {height: 50px;width: 50px;}.div1 {background-color: red;}.div2 {background-color: green;position: relative;top: 22px;left: 33px;}.div3 {background-color: blue;}</style>
</head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body></html>

position： absolute 绝对定位（！注意这个会脱离文档流哦）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>绝对定位</title><style>#div {width: 300px;height: 300px;background-color: blueviolet;position: absolute;left: 110px;top: 110px;}</style>
</head><body><div id="div"></div></body></html>

此时设置定位后距离顶部110px，距离左边110px

值得一提的是元素设置绝对定位后，他原本的位置会被其他元素占据，也就是所谓的脱离文档流

Position属性值的相关解析相关推荐

CSS中position属性值有哪些？
CSS中position属性值有哪些? 1.position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流( ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS中position的几个属性值
CSS中position的几个属性值 position的四种取值 : static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
css的position属性取值
css中position属性用于元素定位,其属性值有5个,分别是inherit .static.relative.fixed.absolute ,下面是具体的分析: 1.inherit 规定该元素的p ...
html中position属性默认值,CSS position 属性总结
CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~ 下面是总结内容~ 有疏漏.错误之处敬请指出!o(^▽^)o 一.简介定义:posi ...
CSS中的Position属性
1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. r ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...

Position属性值的相关解析

Position属性值的相关解析相关推荐

最新文章

热门文章