天坑,CSS之定位Position(六分之五)
Position定位
个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。
position属性
position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。
对应了四个与之相关的位置属性,top、right、bottom、left,分别是指离上、右、下、左的距离,注意是设定后移动自身,不是挤走别的元素。
下文称位置属性即为top、right、bottom、left。
如果一个页面,不通过position的调整,在如今看来,将是极度难以忍受的。其主要包含下列属性值,不含继承的话,共有5个,以下一一例举:
- static
直译为静态,默认值,在其上使用position的位置属性无效。
relative
直译为相对,与static近似,但在其上使用position的位置属性有效。
注意,relative不会脱离文档流,具体见下面的图示。
absolute
直译为绝对,向上寻找 第一个非static定位的标签,然后位置属性相对其有效。如果没有找到,则相对document。
向上寻找:标签存在父子级关系,由子级向父级乃至祖宗级直到body为止。向下则相反。
absolute会脱离文档流。fixed
直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。
fixed会脱离文档流。
sticky
直译为粘性,当相应内容显示在视觉范围内,则表现为relative定位,当内容即将逃出显示区域时,切换为fixed定位。
sticky不会脱离文档流,即使换成了fixed。
以下针对5种定位做出图文描述
static
static设置位置属性是无效的
static为了方便理解还是与relative对比可以看出效果
- relative
relative设置位置属性有效,并且没有脱离原本文档流,只是显示位置变化了而已
absolute
此图是证明相对于document
absolute的最大难点就是具体相对谁的定位:
absolute相对的是向上第一个不是static默认定位的元素,如果没有找到,则相对于document
此图是证明相对于非static的父级标签,也可以自己试试,父级标签都是默认会如何。
fixed
相对于浏览器窗口显示内容定位
如果对fixed元素的父级元素设置了transform,则回导致fixed失效,这里有个印象就好。
- sticky
处在显示区域中是使用relative,当要逃出显示区域时切换为fixed
新出的,兼容性注意下就好,非常适合做一下标题模块。
以上就是position相关的速讲知识,有疑问或者其他可以留言询问。
如果文章对你有一点帮助,我就非常的开心了。
喜欢我的文章,请关注我,定期发布技术文章,满满的干货。
源码相关
天坑,CSS之定位Position(六分之五)的更多相关文章
- css 页面定位position
position的四个属性值 relative absolute fixed static 参看实例 <div id="parent"> <div id='su ...
- CSS中定位position
毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS:CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
随机推荐
- 设置PPT版式
1.点击视图,幻灯片母版 2.选中某个PPT母版,可进行编辑
- Nginx配置使用
1.黑色标注的得自己写入到nginx.conf文件中 upstream serverlb { server 127.0.0.1:9999; server 127.0.0.1:8888; } serve ...
- BGP2
1) 按照拓扑搭建网络,在所有AS间使用直连接口建立EBGP邻居关系: 2) 在公司总部AS400中,R4与R5,R5与R7,R7与R6,R6与R4间使用环回接口建立IBGP邻居关系,IGP协议使用O ...
- nginx+php+扩展件安装实践版
一.安装各种软件包 yum -y install wget git vim lrzsz unzip zip gcc make gd-devel bzip2 bzip2-devel libcurl li ...
- 如何在Windows服务器上新建一个Powershell.ps1的定时任务
背景: 有一些一次性的Powershell脚本,需要我们每次都手动执行一下,为了简化工作,现在我们可以使用Windows自带的计划任务,进行定时执行. 该教程是在Windows Server 2012 ...
- 78)PHP,编写session存储机制(将数据写进数据库)的代码整理(未实验)
<?php function userSessionBegin() { echo '<br>Begin<br>'; //初始化数据库服务器连接,这个函数是最先执行,所以, ...
- C++ const成员变量和成员函数(常成员函数)
在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. const成员变量 const 成员变量的用法和普通 const 变量的用法相似,只 ...
- django框架基础-路由系统-长期维护
################## 路由系统介绍 ####################### 路由系统就是路径和函数的对应关系, 路由系统可以看成支撑你这个网站的目录,就像是一本书一样 ...
- 在CentOS安装CMake (CentOS7 64位适用)
在CentOS安装CMake 转自:http://www.cnblogs.com/mophee/archive/2013/03/19/2969456.html 一.环境描述 1.系统:CentOS 6 ...
- Metasploit MS15-020漏洞利用
title date tags layout Metasploit MS15-020漏洞利用 2018-05-06 Metasploit post 环境: 共享机/受害者:windows xp IP: ...