常用的位置属性列表:

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. 树分治 poj 1741

    n k n个节点的一棵树 k是距离 求树上有几对点距离<=k; #include<stdio.h> #include<string.h> #include<algo ...

  2. Oracle MERGE INTO 语句

    MERGE INTO USER_TEST T1 USING (SELECT '1001' AS ID,'王睿' AS NAME FROM dual) T2 ON ( T1.ID=T2.ID) WHEN ...

  3. 用cmd重命名.htaccess

    本人上天修改PHP下伪静态文件htaccess.txt,需要改为.htaccess要是在Linux倒是很随意的事情,可惜window不给改,真的不可改吗,其实方法还是很多的,比如复制在记事本另存也可以 ...

  4. sql insert into select语句写法-将查询结果直接插入到表中

    insert into month_gpcj_info(idStr,zszrmygpsl,xyzrmygpsl,mycje,mycjl,month_date,dataCompiledDate) sel ...

  5. shell 题

    (1)有一推主机地址:a.baidu.com.....z.baidu.com如何从这些数据中提取出.baidu.com之前的字母,如:a b...z? #cat f1.txt | while read ...

  6. [转]Ajax跨域请求

    一.编一个服务器端servlet @RequestMapping("/haha") @ResponseBody String haha(String haha, HttpServl ...

  7. [bzoj2517]矩形覆盖

    Description 给定一个$l\;\times\;w$的矩形,和$n$个圆,求最小的$k$使得每个圆的半径$\;\times\;k$后,能覆盖整个矩形. Input 第一行一个整数$T$,表示数 ...

  8. Java并发和多线程(一)基础知识

    1.java线程状态 Java中的线程可以处于下列状态之一: NEW: 至今尚未启动的线程处于这种状态. RUNNABLE: 正在 Java 虚拟机中执行的线程处于这种状态. BLOCKED: 受阻塞 ...

  9. 【codevs1743】 反转卡片

    http://codevs.cn/problem/1743/ (题目链接) 题意 给出一个序列{a1,a2,a3···},要求维护这样一种操作:将前a1个数反转,若第a1等于1,则停止操作. Solu ...

  10. 微信小程序一步步搭建商城系列-01-开篇

    1.小程序介绍 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不 ...