CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆，写一段代码详解各自具体情况：
position在w3school的可能取值：
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
测试代码如下：
<html>
<head>
<style>
#filp
{
width:100%;
position: static;
top:110px;
font-size: 50px;
line-height: 1px;
}
</style>
</head>
<body>
<div id="div1">
<h2 id="glow">lighy</h2>
<h2 id="blur">blure</h2>
<div id="div2">
<h2 id="shadow">shadow</h2>
<h2 id="filp">Flip===</h2>
<h2 id="dropshadow">shshddddd</h2>
<h2 id="wave">wavessss</h2>
</div>
</div>
</body>
</html>
显示效果如下：
从上图可以看出，”filp===“在正常流中的位置，就是其在html文档中从上到下，从左到右顺序位置；
接下来看看absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
修改代码中
#filp
{
width:100%;
position: absolute;
top:1px;
font-size: 50px;
line-height: 1px;
}
元素跑到左上角了，不是说”static 定位以外的第一个父元素进行定位“吗？应该是div=”div2“才是第一个父元素啊？fip===应该在blur下面才对啊！
后来查了另外一种解释：”absolute定位在其第一个absolute 或 relative的父元素，否则定位到body元素处“。这下就能解释为何跑到左上角去了！
需要注意一下，flip===离开后，其下面的元素上移，占据了其原来位置，这就是所谓”脱离正常流“，脱离了流，其流中位置自然就不被保留！
下面看看fixed：
改代码如下：
<html>
<head>
<style>
#div1
{
float:right;
}
#filp
{
width:100%;
position: fixed;
top:1px;
left: 20px;
font-size: 50px;
line-height: 1px;
}
</style>
</head>
<body>
<div id="div1">
<h2 id="glow">lighy</h2>
<h2 id="blur">blure</h2>
<div id="div2">
<h2 id="shadow">shadow</h2>
<h2 id="filp">Flip===</h2>
<h2 id="dropshadow">shshddddd</h2>
<h2 id="wave">wavessss</h2>
</div>
</div>
</body>
</html>
其他元素都float到窗口右侧了，flip===在浏览器的左上角，这就是”相对于浏览器窗口进行定位“的位置，注意它是脱离正常流的！
我们再看看relative：
首先代码改成如下：
<head>
<style>
#filp
{
width:100%;
position: relative;
top:200px;
left:200px;
font-size: 50px;
line-height: 1px; }
</style>
</head>
从上图可以看出，这个flip===跑到右下角，shadow下面有一行空行！那是filp===原来的位置；
”生成相对定位的元素，相对于其正常位置进行定位“，这里所谓正常位置就是”原来正常流中的位置“，以此位置为原点top left偏移！！
float：
上面float：right；可以看出，float：right是其浮动至窗口（通常是其父元素(默认为body文本区域)的左右边框）右侧，其左侧可以有其他块元素，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
overflow：
说明：该属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，内容如果超出就会出现滚动条。
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
scroll：
修改js代码：
<head>
<style>
#div1
{
overflow: scroll;
width:300px;
height:300px;
}
#filp
{
position: relative;
top:200px;
left:200px;
font-size: 50px;
line-height: 1px;
}
</style>
</head>
上图是一个width:300px; height:300px;的窗口，右边和下面有scroll bar（苹果电脑看不到滚动条，截图效果不好，发挥发挥想象力！），来拉动可以看到被隐藏的内容：
visible：
先改代码如下：
<head>
<style>
#div1
{
overflow: visible;
width:300px;
height:300px;
}
#filp
{
position: relative;
top:200px;
left:200px;
font-size: 50px;
line-height: 1px;
}
</style>
</head>
visible就是显示超出部分的内容，如上图没有scroll bar 一览无余！
其余属性字面就很容易理解，不赘述了。
CSS position overflow float 属性 详解的更多相关文章
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- css float属性详解
定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- float属性详解
内容: 1.block与inline复习 2.float介绍 3.float作用 4.清除浮动 1.block与inline复习 1 block元素是独立的一块,独占一行 2 多个block元素会各自 ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...
- 转-CSS padding margin border属性详解
原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...
- CSS 不换行 white-space 属性详解
实例 规定段落中的文本不进行换行: p { white-space: nowrap } 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTM ...
- 关于css中的align-content属性详解
align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式. 条件:必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:r ...
随机推荐
- linux_shell_拆分文件_多进程脚本
[需求场景]:一个10000w行的文件处理 ,多进程处理 比如启动100个进程同时处理. [方法]:拆分文件(split) ,制作shell脚本 执行后台进程 [demo]: 假设处理程序为 ...
- HDU 4005 The war （图论-tarjan）
The war Problem Description In the war, the intelligence about the enemy is very important. Now, our ...
- csu 1503: 点弧之间的距离-湖南省第十届大学生计算机程序设计大赛
这是--比量p并用交点连接中心不上弧.在于:它至p距离.是不是p与端点之间的最短距离 #include<iostream> #include<map> #include< ...
- Zepto
移动开发流量省起来之Zepto 事情是这样的:最近开发的一个手机网站客户反应访问起来特别慢,刷了半天才能看到页面,然后问我们是不是网站出问题了.于是我赶紧找了各种手机测试一下,没有问题,首先排除程序错 ...
- linux监控命令全覆盖（图文说明）
1.1 top 1.1.1 命令说明 Top 命令能够实时监控系统的运行状态,并且可以按照cpu.内存和执行时间进行排序 1.1.2 参数说明 命令行启动参数: 用法: top -hv | -bcis ...
- 使用SoapUI 测试Web Service
原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...
- web中国的数据分析过程
1 获得web原始数据 2 确定数据编码 例如:是不是url编码或base64编码 3 如果有必要的解码编码 4 确定原始数据和本地字符集显示字符集 5 字符集转换 6 显示 版权声明:本文博客原创文 ...
- C++中的左值和右值
左值和右值的定义 在C++中,能够放到赋值操作符=左边的是左值,能够放到赋值操作符右边的是右值.有些变量既能够当左值又能够当右值.进一步来讲,左值为Lvalue,事实上L代表Location,表示在内 ...
- .Net编译之AnyCPU - 进阶者系列 - 学习者系列文章
Visual Studio是一款非常强大的IDE工具,它为我们提供了强大的编码.调试和测试等工具,为我们编好.NET软件提供了强大的支持. 今天早晨想到了Visual Studio编译模式中的CPU类 ...
- HTML 速成
html零基础者入. 记得学计算机网络的时候好像有学过一些HTML,但没运用起来都忘光了.近来想学学如何写网页.就从html(HyperText Markup Language超文本标记语言)入手了. ...