position属性详解
这是属性是positon的默认值,如果一个div我们没有给他任何的position,那么他不会脱离文档流,他的属性就是static,不理解这个我就没的说了...
<mce:style type="text/css"><!-- #box1{border:#000 solid 1px; width:150px; height:100px; } #box2{ position:absolute;border:#000 solid 1px; } #box3{border:#000 solid 1px; width:150px; height:100px; } --></mce:style><style type="text/css" mce_bogus="1"> #box1{border:#000 solid 1px; width:150px; height:100px; } #box2{ position:absolute;border:#000 solid 1px; } #box3{border:#000 solid 1px; width:150px; height:100px; } </style> <div id="box1"></div> <div id="box2">绝对定位</div> <div id="box3"></div>
从上图可以看出 absolute是脱离了文档流的,那绝对定位是如何进行定位的呢,这时候要注意了top和left两个属性。看例子:
1.
<
style
type
=
"text/css"
>
2.
body{ margin:0; padding:0}
3.
#box{ background:#00F; width:1002px; height:500px; margin:0 auto}
4.
#abox{ width:150px; height:100px; background:green; position:absolute; left:50px; top:50px}
5.
</
style
>
6.
<
div
id
=
"box"
>
7.
<
div
id
=
"abox"
><
DIV
></
DIV
>
8.
</
div
>
在1024*768的分辨率下运行以上代码,此时发现abox距box的上、左距离都是50px,貌似设计的没有问题,此时我们把分辨率换成宽度大于1024的 此时就发现问题了,如我的是1600*1440,结果就变了
这说明本例中absolute的top和left值的是相对于浏览器边框的,如果我们想让abox距box的上左距离固定为50px的话(也就是说让top和left的值相对于某个div),那么我们需要在把box的position属性设置为relative。经过我自己的一些实践得出以下结论:
如果一个元素设置为absolute,那么他的top和left相对位置的寻找过程是这样的,首先他会检查他的父框是不是relative,如果是他就按照父框定位,如果不是他会继续寻找他父框的父框是不是relative,如果是就按照他父框的父框定位,如果不是他就去检查他父框的父框的父框是不是relative.....以此类推,如果他的所有祖先都没有relative,他就按照浏览器边框进行定位。
说的简单点,有两个div,分别是diva,divb,如果让diva相对于divb偏移,那么第一步设置diva为absolute,设置偏移量left top。第二步把diva放在divb的内部(儿子 ,孙子,重孙子等等都可以,只要是他的子元素就可以)
相对定位,首先要明白相对定位只是相对某个元素的本身而言。这个没有脱离标准流,他按照标准流的方式排版。
比如仅设置了一个元素relative,那么他的位置和static一样,如果又设置了他的left和top,那么它会做一些偏移,偏移是相对于他本身而言,比如top:20px;left:30px;此时这个会在原来的位置上 向下移动20px,像右移动30px,要注意的是,这个元素移动之后的占用标准流的位置没有变化,就是说,没移动前他占用的是哪位置就是哪位置,不会因为移动了元素,导致整个文档布局发生改变。
固定位置,脱离了文档流,效果是无论怎么拖动滚动条,它始终固定在屏幕的指定位置,本来是挺好的一个功能,可惜的IE6不支持。
这个同样没什么的说的,inherit就是继承,继承父元素的父元素的 position 值。
总结:不明白的地方多翻翻CSS手册,看明白了之后自己动手写写
position属性详解相关推荐
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
- CSS3animation属性详解(三)
CSS3animation属性详解(三) animation-direction animation-direction属性 检索或设置对象动画在循环中是否反向运动 语法 animation-dire ...
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
- Z-index属性详解
Z-index属性详解 1.概念 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 2.案例 <!DOCTYPE html> <ht ...
- CSS margin属性详解
CSS margin属性详解 我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
- overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性 原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
- spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
最新文章
- 深度神经网络中的Batch Normalization介绍及实现
- python中requests库的用途-python中requests库session对象的妙用详解
- 我肝了一个月,给你写出了这本Java开发手册。
- BUU[SCTF2019]Strange apk
- surging 微服务引擎 1.0 正式发布
- 视觉slam十四讲 pdf_视觉SLAM十四讲|第12讲 回环检测
- 令人振奋的好消息!2016年12月8日Google Developers中文网站发布!
- 【Liunx】Linux 文件基本属性
- C#的委托(delegate、Action、Func、predicate)
- 华为机试HJ73:计算日期到天数转换
- 辨异 —— 数学基本概念
- 3,graph语法学习
- 高仿一元云购IOS应用源码项目
- wav转mp3,wav转换成mp3
- 黑群晖二合一已损毁_手动修复黑群晖已损毁磁盘空间
- 滴滴顺风车即将重新上线,试运营方案涉嫌歧视女性乘客
- C++春招实习和秋招面试过程记录
- 七个不良习惯导致攻击者轻松入侵数据库
- swoft2 小白教程系列-进程篇
- [Linux]关于网卡配置文件