CSS-Position用法的理解

CSS语法中，对于position的使用一直搞不清楚，特写此博客，帮助自己理解和记忆
gitHub地址: https://github.com/thinkingfioa/
CSS中的定位(position)
1. position的定义
允许用户精确定义元素框出现的相对位置。可以是相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。

2. position的属性值
position属性指定了元素的定位类型。position属性的四个值。static和relative在文档流中，与fixed和absolute相反。

1.static
2.relative
3.fixed
4.absolute
2.1 static
1.static是position的缺省值，一般不设置position属性时，默认是static。
2.静态定位元素(static)不会受到top，bottom，left，right影响
2.2 relative
1.相对本身位置的偏移(static定位下的元素位置为本身位置)。
2.受到top、bottom、left、right影响
3.且不会影响后面其他元素的位置。
4.原本空间不会改变(static和relative在文档流中，与fixed和absolute相反)
2.3 fixed
fixed是特殊的absolute，即fixed总是以浏览器的可视窗口(屏幕内网页窗口)进行定位。不占据空间

2.4 absolute
当一个元素A设置了position:absolute后，分为两种情况:

1.当元素A的父对象设置了position属性，且position的属性值为absolute或relative或fixed，也就是说不是默认的，则元素A按照父对象来定位。如果父对象设置了margin、border、padding等属性，则元素A将会从padding开始的地方进行定位

2.如果元素A没有一个position属性的父对象，则以body为定位对象
---------------------

原文：https://blog.csdn.net/thinking_fioa/article/details/79659619

CSS-Position用法的理解相关推荐

css .clearfix,css之clearfix的用法深入理解(必看篇)
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子: Div布局如下: Css代码如下: CSS Code复制 ...
CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
html css position,[CSS]CSS Position 详解
一. CSS position 属性介绍 CSS中position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型.有static,relative,absolute和fixed四种取值 ...
html 图片position,【图解CSS#Position】
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 先看一个图 ...
详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
网页重构应该避免的10大 CSS 糟糕用法
原文地址罗磊的独立博客:「网页重构应该避免的10大 CSS 糟糕用法」对于网页重构来说,CSS禅意花园是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越 ...
css旋转属性如何理解
css旋转属性如何理解 1.css旋转属性为transform. transform属性说明 2.transform属性将2D或3D转换为元素.这个特性允许我们旋转,缩放,移动或者倾斜元素. tran ...
CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
教你玩转CSS Position(定位)
目录 CSS Position(定位) static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位重叠的元素所有的CSS定位属性
[css] 简述下你理解的优雅降级和渐进增强
[css] 简述下你理解的优雅降级和渐进增强优雅降级,先做好一个完善的具备完整体验的版本,再向下做兼容. 渐进增强,先做好一个可以基本正常使用的版本,再慢慢丰富体验和内容. 个人简介我是歌谣,欢迎 ...

CSS-Position用法的理解

CSS-Position用法的理解相关推荐

最新文章

热门文章