css关于定位那些事情
css绝对定位、相对定位和文档流的那些事 前言
接触html、和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。 文档流的概念
确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行 如块级元素(block) <div>div1</div>
<div>div2</div>
效果如下
ok,那么怎么知道这不是因为没有设置高和宽的样式而出现的情况呢,我们听邓爷爷的话,实践是检验真理的唯一标准 <div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px;">div2</div>
效果如下:额,没坑你吧... 又如内联元素(inline) <img src="Image/close.gif" alt="图片" style=" height:100px; width:100px;"/>
<a href="http:">超链接1</a>
<a href="http:">超链接2</a>
效果如下:可以看到内联元素后跟内联元素不会另起一行
我们再试下inline 后加 block <img src="Image/close.gif" alt="图片" style=" height:100px; width:100px;"/>
<a href="http:">超链接1</a>
<a href="http:">超链接2</a>
<div style=" width:100px; height:100px;">div1</div>
效果如下:可以看到div1(block)是另起一行独占的
相对定位 position:relative
故名思意,相对定位就应该是相对于一个东西来定位,而这个东西是什么呢?其实这个东西不是什么,就是元素自己本身,用left right top b0ttom进行定位后,元素会根据原来的位置进行移动,但由于position:relative这个属性并没有脱离文档流的,所以元素本身所占的位置会保留。 下面来做个实验,一看你就懂了- - <div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px;">div2</div>
<div style=" width:100px; height:100px;">div3</div>
效果如下:这是没有加入position:relative文档流的默认排法
我们给div2加position:relative 并用top:-20px;left:50px进行相对移动 <div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div>
<div style=" width:100px; height:100px;">div3</div>
效果如下:额,为了给大家看到效果还有省了ps的劲直接截了ide的图...但我保证在浏览器里他也是这么排的。我们可以看到蓝色边框就是div2原来的位置,黑色边框就是通过position:relative相对于原来的位置左移50px; 上移20px得到的,而且我们看以看到,div3并没有因为div2的上移而上移了,原因就是position:relative这个属性是没有脱离文档流的,所以元素本身所占的位置会保留。
绝对定位 position:absolute
好吧终于有点戏肉了,文档流那复杂的玩意我们先不理,所谓绝对定位,其实也要找个东西来相对来绝对的,而这个东西就是元素的第一个有position,且positon不能为static的祖先元素,是不是有点拗口,换个说法吧,就是这个小鬼(element)的定位可以是他的老爸,他的爷爷,他的太公....(祖先要素)中而且第一个是是有钱的(position:absolute)或者是当官的(position:relative),就是不能是个程序猿(position:static 或者没有设position)的。而且值得注意的是position:absolute这个属性是脱离文档流的,所以重新定位后元素是不会占着原来的位置的 还是跟着程序来吧- - 复制代码
<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">
红色:太公
<div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">
绿色:爷爷
<div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">
黄色:老爸
<div style="width: 100px; height: 100px;">
div1</div>
<div style="width: 100px; height: 100px;">
div2</div>
<div style="width: 100px; height: 100px;">
div3</div>
</div>
</div>
</div>
复制代码
效果如下:首先给div1 div2 div3三个祖先div 黄色的老爸, 绿色的爷爷, 红色的太公,暂时对他们都不设position属性
好吧,现在给老爸div设position:relative(哟!当官的)给div2设position:absolute;left:120px; top:100px; 复制代码
<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">
红色:太公
<div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">
绿色:爷爷
<div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; position:relative;">
黄色:老爸
<div style="width: 100px; height: 100px;">
div1</div>
<div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">
div2</div>
<div style="width: 100px; height: 100px;">
div3</div>
</div>
</div>
</div>
复制代码
效果如下:可以从蓝色线看出,div2以黄色(ide的蓝线和黄色混在一起变色了)div为参照距离老爸左边120px 上边100px而且有于position:absolute是脱离文档流的所以div2原来的位置不能保留div3向上填充
我们再用他爷爷来试试 复制代码
<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px">
红色:太公
<div style="border:1px solid Green; padding:10px; width: 320px; height: 360px; position:relative;">
绿色:爷爷
<div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">
黄色:老爸
<div style="width: 100px; height: 100px;">
div1</div>
<div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">
div2</div>
<div style="width: 100px; height: 100px;">
div3</div>
</div>
</div>
</div>
复制代码
效果如下:还是div2还是 position:absolute;left:120px;top:100px,可以冲蓝色线看出这次是以绿色爷爷为参照物做绝对定位的,而且div2同样脱离了文档流
文章转自:http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html
css关于定位那些事情的更多相关文章
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- CSS:CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- 转:Selenium之CSS Selector定位详解
CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式. 百度输入框: <input name=&quo ...
- CSS 中定位的使用
position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...
- css的定位机制
牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
随机推荐
- POJ 1636 Prison rearrangement DFS+0/1背包
题目链接: id=1636">POJ 1636 Prison rearrangement Prison rearrangement Time Limit: 3000MS Memor ...
- [LeetCode] Meeting Rooms I & II
Meeting Rooms Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s ...
- Java设计模式之工厂模式的两种实现方式
工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 1. 为什么要有工厂模式? "Talk i ...
- 每日英语:Why Rate Your Marriage? A Numerical Score Can Help Couples Talk About Problems
When marriage therapist Sharon Gilchrest O'Neill met with new clients recently, she asked them why t ...
- setRequestedOrientation
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//通过程序改变屏幕显示的方向 1.landscape:横屏(风景 ...
- 【教程】鼠标右键新建添加RTF文档
鼠标右键新建添加RTF文档 今天想将空间日志作个本地备份,但是苦于找不到适合的文本工具,因为一般的文本编辑工具都不支持贴图. 虽然word就可以满足我们的需求,但文件格式不用doc而是rtf 而 ...
- hive查询遇到java.io.EOFException: Unexpected end of input stream错误
hive查询遇到java.io.EOFException: Unexpected end of input stream错误 原因基本上有两个: 空文件 不完整的文件 解决办法: 删除对应文件- 参考 ...
- WebService中方法的重载
阅读目录 一:WebService中的方法是否允许重载? 二:为什么WebService中不支持方法的重载? 三:如何解决WebService中方法的重载? 一:WebService中的方法是否允许重 ...
- #pragma pack(push) 和#pragma pack(pop) 以及#pragma pack()
我们知道结构体内存对齐字节可以通过#pragma pack(n) 的方式来指定. 但是,有没有想过一个问题,某些时候我想4字节对齐,有些时候我又想1字节或者8字节对齐,那么怎么解决这个问题呢? 此时, ...
- tf.reduce_mean
tf.reduce_mean reduce_mean( input_tensor, axis=None, keep_dims=False, name=None, reduction_indices=N ...