关于css定位
关于定位要弄清一个概念,那就是"文档流"
什到是文档流 说得简单一点 就是 自上而下 从左到右
生成顺序
关于html元素又分为两种 块状元素 内联元素
块状元素：单独占一行
内联元素: 撑完了在到下一行
有时候我们需要 相同的div在一行 所以就用到float
但是有时候需要把某个元素 放在特定的元素的位置
但又不影响页面结构 那么我们的定位功能就出现(脱离文档流，就好像悬浮于它上面)
不多说了上个例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
#test{
border:1px solid #ccc;
width:500px;
height:2000px;
} #test_1{
border:1px solid #ccc;
width:300px;
height:300px;
z-index:1000000;
position:relative; } #test_1_1{
border:1px solid #ccc;
width:100px;
height:100px;
cursor: pointer;
position:fixed;
left: 100px;
top:300px;
z-index:99998;
}
/*
absolute:绝对定位 如果父元素没有定位元素则按body偏移
如果有则按定位元素来偏移(会脱离文档流) relative是相对于自己本身来定位的 他是参照父级的原始点为原始点，无父级则以body的原始点为原始点
relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，
如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位(不会脱离文档流) fixed:固定定位相对视窗(脱离文档流) */ </style>
</head>
<body>
<div id="test">
<div id="test_1">
<div id="test_1_1">
sgsgsgs
</div>
</div>
</div>
</body>
</html>
关于w3c总结说明图
关于css定位的更多相关文章
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位，XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- CSS定位小技巧
CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- CSS定位（CSS定位概述、相对定位、绝对定位、浮动）
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- CSS定位（postion）和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- 关于 Xcode 调试工具 GDB and LLDB
xcode 5 好像弃用了GDB .而默认使用苹果自己开发的调试工具 LLDB. http://iosre.com/forum.php?mod=viewthread&tid=52 LLD ...
- [CTCI] 单词最近距离
单词最近距离 题目描述 有一篇文章内含多个单词,现给定两个单词,请设计一个高效算法,找出文中这两个单词的最短距离(即最少相隔的单词数,也就是两个单词在文章中位置的差的绝对值). 给定一个string数 ...
- 行为类模式（十一）：访问者（Visitor）
定义 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. UML 优点 符合单一职责原则:凡是适用访问者模式的场景中,元素类中需要封装在访问者中的 ...
- 行为类模式（九）：策略（Strategy）
定义 针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. UML 优点 策略模式提供了管理相关的算法族的办法.策 ...
- how to build jdk 9 source code
http://hg.openjdk.java.net/build-infra/jdk9/raw-file/tip/README-builds.html#vs2013 http://royvanrijn ...
- TCP三次握手，四次分手
1.什么是HTTP连接 http是建立在TCP协议之上的一种应用. 最显著的特点是每次请求,都需要服务器响应,请求结束后,会主动释放连接. 1)在HTTP 1.0中,客户端的每次请求都要建立一次单独的 ...
- lua 的 table 处理
lua 的整体效率是很高的,其中,它的 table 实现的很巧妙为这个效率贡献很大. lua 的 table 充当了数组和映射表的双重功能,所以在实现时就考虑了这些,让 table 在做数组使用时尽量 ...
- Asp.Net发送手机验证码
C#发送手机验证码,平台有很多,我就说说其中的1个平台 测试环境:.net2.0 测试效果:速度还可以,10秒内接收短信 1.去http://www.yuntongxun.com注册,会送8元测试金额 ...
- 项目bug
word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空 ...
- weblogic域备份脚本
一直一来,由于空间问题,weblogic域很少备份,偶尔会手动备份一次,这运维做得不称职,今天有时间,写个小脚本来定时备份. 1.脚本备份文件目录结构 [weblogic@mylinux ~]$ tr ...