浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过程,整理一下和大家分享。
这是 w3school上对 position 的几种值的描述:
对于 static 、 fixed 和 inherit 就不多啰嗦了,相对简单点。
首先要准备几个元素做对比用:
<div id="div1">
<h3>div1</h3>
<div id="div2"><h3>div2</h3></div>
<div id="div3"><h3>div3</h3></div>
<div id="div4"><h3>div4</h3></div>
</div>
h3{
color: white;
}
#div1{
width: 120px;
height: 200px;
background-color: black;
}
#div2{
width: 50px;
height: 20px;
background-color: red;
}
#div3{
width: 80px;
height: 40px;
background-color: green;
}
#div4{
width: 100px;
height: 60px;
background-color: blue;
}
呐,就是这个样子的:
有点啰嗦了,下面是主题了。
1、relative(相对定位)
我们给div2添加相对定位的属性,并下移20px,右移40px:
#div2{
width: 50px;
height: 20px;
background-color: red;
position:relative;
top:20px;
left:40px;
}
看一下效果:
很明显,div2移动了,但是(肯定有“但是”嘛,不然就是废话了),其他div的位置都没有变化,而且,div2本身所占据的空间还在,只是感觉div2好像浮了起来,占了两个位置,相对本来自身应该在的位置发生了位移,而且不影响其他元素,好吧,这就是所谓的“相对”了。
2、absolute(绝对定位)
我们给 div3 加上绝对定位的属性试一下:
#div3{
width: 80px;
height: 40px;
background-color: green;
position:absolute;
top:0px;
left:0px;
}
效果就是这个样子的:
div3跑到了页面的左上角(0,0)位置,并且不占据原来的位置空间了,因为div4往上移动了嘛,可是还空一块空间啊,因为div2还是相对定位的嘛。可以理解为div3脱离了正常流(什么?流是什么?那什么,谷哥、度娘吧),随着“T-R-B-L”改变当前位置。
现在问题又来了,那这样不就是和 fixed 一样了嘛,相对浏览器窗口进行定位?好吧,是没研究结束呢,假如我在现在的基础上给给div1添加定位的属性呢?(⊙o⊙)…div1看不见了,就是黑色的那个块。
#div1{
width: 120px;
height: 200px;
background-color: black;
position:relative;
}
OK!这就是和 fixed 的区别了,absolute不是相对浏览器窗口定位,是相对最近的有 position 属性设定(不包括 static 值)的祖先元素进行定位,如果其所有祖先元素均没有设置position的话,那就和 fixed 的效果一样了。
理论呢,就是这么个样子的,应该不难理解吧,至于能掌握到什么程度,好吧,多写写就会了。
浅谈css中的position属性的更多相关文章
- 浅谈css中的position
什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
随机推荐
- [Redux] Accessing Dispatch and State with Redux -- connect
If you have props and actions, you want one component to access those props and actions, one solutio ...
- 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...
- AttributeBehavior
当事件触发的时候... 会循环所有behavior的events 为ower添加事件.....AttributeBehavior 为事件添加如下方法 public function evaluat ...
- day06 Java基础
1.二维数组格式一(列固定):数据类型[][] 变量名=new 数据类型[m][n]; 二维数组格式二(列变化):数据类型[][] 变量名=new 数据类型[m][]; 二维数组格式三:数据类型[][ ...
- the railway problem(the example of stack)
this problem is a very classic problem which can use stack to solve. the problem can be searched thr ...
- 用CAS操作实现Go标准库中的Once
Go标准库中提供了Sync.Once来实现"只执行一次"的功能.学习了一下源代码,里面用的是经典的双重检查的模式: // Once is an object that will p ...
- Http Message Converters with the Spring Framework--转载
原文:http://www.baeldung.com/spring-httpmessageconverter-rest 1. Overview This article describes how t ...
- 《Entity Framework 6 Recipes》中文翻译——第九章EntityFramework在N层架构程序中的应用(七)
在WCF服务中的序列化代理 问题 您有一个从查询返回的动态代理对象,你想要把它像POCO对象已经进行序列化.在序列化基于实体对象的POCO(普通旧CLR对象)时,实体框架会自动生成一个动态生成的派生类 ...
- js函数中的几个特点
定义函数有两种方式:函数声明 函数表达式 1.函数声明是这样的: function box(arg0,arg1,arg2){ //函数体} 关于函数声明有一个重要的特征:函数声明提升,也就是说执行代码 ...
- [转]MVC自定义数据验证(两个时间的比较)
本文转自:http://www.cnblogs.com/zhangliangzlee/archive/2012/07/26/2610071.html Model: public class Model ...