常用的位置属性列表:

position(top、bottom、left、right) 、overflow、z-index

position用法:

描述
relative

相对定位,原位置仍占用空间,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute

绝对定位,不保留原空间,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

绝对定位,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

position实例:http://zh.learnlayout.com/position-example.html

overflow用法:

(注意overflow-x\overflow-y应用)

overflow 属性是用来设定当內容放不下时的处理方式。可能的值包括:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
initial 用于设置 CSS 属性为它的默认值(初始值)。
inherit 规定应该从父元素继承 overflow 属性的值。

z-index应用:

z-index 属性是用來决定元素重叠的顺序。换言之,当两个元素有重叠的情况出现时,z-index 值将会決定哪一個元素在上面。z-index 值比较大的元素会被放在上面。

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

CSS中常见的位置(position)属性的更多相关文章

  1. css中的display以及position属性

    我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...

  2. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  3. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  4. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  5. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  6. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  7. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  8. css中常见几种float方式以及倒计时(刷新页面不清)

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  9. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

随机推荐

  1. Intellij 常用快捷键

    Project [Alt+1]Version Control [Alt+9]Run [Ctrl+Shift+F10]Debug [Ctrl+Shift+F11]Terminal [Alt+F12]Ed ...

  2. python 基础 基本数据类型

    基本类型的补充 str --> 一次性创建的,不能被修改,强制修改就会在创建一个而之前的也会在 list -->允许重复的集合 修改  记录 链表,下一个元素的位置,上一个元素的位置 tu ...

  3. css-css权威指南学习笔记3

    第三章 结构和层叠 1.确定应向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程就称为层叠.. 2.特殊性.如果一个元素有两个或多个冲突的属性声 ...

  4. response与文件下载

    参考博客: http://www.cnblogs.com/lcpholdon/p/4380980.html http://www.cnblogs.com/mingforyou/p/3281945.ht ...

  5. Android成长日记-使用PagerAdapter实现页面切换

    Tip:此方式可以实现页面切换 1. 创建view1.xml,view2.xml,view3.xml,main.xml 在main.xml中创建 <android.support.v4.view ...

  6. CMD.EXE中dir超长字符串缓冲区溢出原理学习

    最近看逍遥的<网络渗透攻击与安防修炼>讲到CMD命令窗口的dir传超长字符串溢出的例子.自己实验了一下,的确会产生程序崩溃,但是具体什么原理没太详细说,这里做一下原理探究,权当学习笔记了. ...

  7. TrustedInstaller管理权限

    TrustedInstaller.exe实际上是“Windows Modules Installer”这个服务的进程,路径位于C:\Windows\servicing\TrustedInstaller ...

  8. squid节点添加新域名测试

    squid节点添加新域名 测试是否缓存成功 #!/bin/bash #-- clear #清屏 方便输出结果观看 url=* #需要测试的url array_node[]="*" ...

  9. 多线程引发OutOfMemoryException

    现象: 内存是绝对没有问题的,3g内存,发生异常时,任务管理器里显示,可用内存还有1G多!不知道什么原因! int i=0; while ((i++) < 2000) { try { Threa ...

  10. Visual Studio原生开发的10个调试技巧

    这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其他一些同样有用的技巧.我整理了一些Visual Studio(至少在VS 2008下)原生开发的调试技巧.(如果你是工作在托 ...