【CSS】【position】css中的position属性

css中的position属性用于设置元素位置的确定方式，它有以下几种取值：

static：默认定位方式，子元素在父容器中挨个摆放
absolute：绝对定位，元素不占据父容器空间，相当于文档body定位
（如果元素的父级节点中有position不等于static的，则相当于最近的非static父节点定位）
relative：相对定位，占据父容器空间，但显示位置相当于自身位置进行偏移
fixed：固定定位，元素相当于窗口进行定位
（相当于窗口而不是文档定位，所以即使发生进度条滚动时，元素相当于窗口的位置仍然不变）
sticky：粘性定位，这是一个带过渡效果的定位方式，只有在滚动时才能看出其变化效果
当偏移量大于指定值时，以static方式显示
当偏移量小于指定值时，以fixed方式显示，但却像relative方式一样占据父容器空间
当元素到达父容器边缘时，位置相当于父容器不再变化

下面以代码来展示实际运行效果：
html代码：

<body><div><div id="div1">div1</div><div id="div2">div2</div></div><div id="div3">div3</div></body>

static定位

<style>#div1 {width: 200px;height: 100px;background: red;position: static;}#div2 {width: 200px;height: 100px;background: yellow;}#div3 {width: 200px;height: 100px;background: blue;}</style>

absolute定位

#div1 {width: 200px;height: 100px;background: red;position: absolute;left: 400px;top: 300px;}

relative定位

#div1 {width: 200px;height: 100px;background: red;position: relative;left: 400px;top: 300px;}

fixed定位

#div1 {width: 200px;height: 100px;background: red;position: fixed;right: 10px;bottom: 10px;}

sticky定位

<body><div id="div4"></div><div id="div1"><div id="div2"></div><div id="div3"></div></div><div id="div5"></div></body><style>* {margin: 0px;padding: 0px;}#div1 {width: 400px;height: 400px;background: red;}#div2 {width: 200px;height: 100px;background: yellow;position: sticky;top: 40px;}#div3 {width: 300px;height: 200px;background: rebeccapurple;}#div4 {width: 400px;height: 200px;background: lightblue;}#div5 {width: 400px;height: 2000px;background: lightblue;}</style>

【CSS】【position】css中的position属性相关推荐

JavaScript 里，$ 代表什么？/JQuery是什么语言？/html中用link标签引入css时的中 rel=stylesheet属性？/EL表达式是什么？...
JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...
CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
CSS中的position定位属性
一.文档流在分析position定位之前可以先简单了解下CSS中的脱离文档流是什么意思. 文档流:可以理解为元素的一种状态,处于这种状态下的元素具有一些特性. (更加详细的文档流讲解可到<关于 ...
css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Position属 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS中定位position 和 transform 移动元素的比较
主要解决问题: 在使用 transform: translate(50%,50%); 平移元素后,再用 offsetLeft 和offsetTop 获取该元素距离 body 左侧距离时,无法获取经 t ...
【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
css 中的position
CSS中position属性介绍(新增sticky) position的含义是指定位类型,取值类型可以有:static.relative.absolute.fixed.inherit和sticky,这 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...

【CSS】【position】css中的position属性

【CSS】【position】css中的position属性相关推荐

最新文章

热门文章