常用的位置属性列表:

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. Mybatis 操作数据库的主键自增长

    本篇文章将研究mybatis 实现oracle主键自增的机制 首先我们看对于同一张student表,对于mysql,sql server,oracle中它们都是怎样创建主键的 在mysql中 crea ...

  2. bzoj3224

    学习了下treap #include<iostream> #include<cstdio> #include<cstdlib> using namespace st ...

  3. win10 google浏览器设置

    在浏览器地址栏中输入命令: chrome://flags/ 撤销:chrome设置了禁止此页弹出提示框 chrome://settings/contentExceptions#popups

  4. [日常训练]常州集训day3

    T1 Description 有$K$个石子,石子只能放在$N$条水平线与$M$条竖直线构成的网格的交点上. 求用$K$个石子最多能找到多少四边平行于坐标轴的长方形,它的四个角上都恰好放着一枚石子. ...

  5. 【BZOJ-3675】序列分割 DP + 斜率优化

    3675: [Apio2014]序列分割 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 1420  Solved: 583[Submit][Statu ...

  6. 树莓派实现远程开机局域网电脑(WOL协议+etherwake+华硕主板Z97)秒变花生壳开机棒

    一.花生壳映射树莓派 参考: http://www.cnblogs.com/EasonJim/p/6100181.html http://www.cnblogs.com/EasonJim/p/6100 ...

  7. 为GitHub项目加入Travis-CI的自动集成

    可以参考这篇文档进行集成:https://docs.travis-ci.com/user/languages/csharp/,只需要三步: 1.创建.travis.yml 2.写入标签 3.试着提交你 ...

  8. Visual Studio 2015 未响应/已停止工作的问题解决

    在我把之前项目从10版本升级到15版本的时候,一打开转换的项目过几分钟立马卡死,出现未响应/已停止工作的问题,我试过了很多方法: 1.升级操作系统,8.1升级10,没用! 2.重装VS,没用! 3.卸 ...

  9. hdu 5017 模拟退火

    题意:给出椭球面的立体解析式,要求椭球面上距离原点最近的点的距离 sol:这题要想推公式就

  10. struts2 CVE-2012-0838 S2-007 Remote Code Execution && Hotfix

    catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...