CSS中常见的位置(position)属性
常用的位置属性列表:
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)属性的更多相关文章
- css中的display以及position属性
我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- css中常见几种float方式以及倒计时(刷新页面不清)
css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...
- [转][译]关于CSS中的float和position和z-index
原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
随机推荐
- Kernel Methods - An conclusion
Kernel Methods理论的几个要点: 隐藏的特征映射函数\(\Phi\) 核函数\(\kappa\): 条件: 对称, 正半定; 合法的每个kernel function都能找到对应的\(\P ...
- jQuery常用的元素查找方法总结
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...
- jquery 双击修改某项值
双击修改某项值 $(function() { $('td.breakword').dblclick(function(){ $(this).addClass('input').html('<in ...
- WebApi服务Uri加密及验证的两种方式
最近的一个项目要求服务端与UI层分离,业务层以WebApi方式向外提供所有业务服务,服务在数据保密性方面提出了要求,主要包括: 1:客户端认证: 2:服务请求超时(默认5分钟): 3:服务Get请求的 ...
- mysql-函数CASE WHEN 语句使用说明
mysql数据库中CASE WHEN语句. case when语句,用于计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以 ...
- 控件 UI: StateTrigger
VisualState 之 StateTrigger 示例1.自定义 StateTriggerControls/UI/VisualState/MyDeviceFamilyStateTrigger.cs ...
- 【HDU 5750】Dertouzos(数学)
题目给定n和d,都是10的9次方以内,求1到n里面有几个数最大因数是d?1000000组数据.解:求出d的满足p[i]*d<n的最小质因数是第几个质数.即为答案. #include<cst ...
- macOS 安装 wget
适用于macOS Sierra Apple Store下载安装Xcode 安装Homebrew包管理,类似于Ubuntu下的apt-get: 终端下输入 ruby -e "$(curl -f ...
- MemberwiseClone和DeepClone
文章转自:http://www.cnblogs.com/zhangji/archive/2011/02/23/1961897.html MemberwiseClone 方法创建一个浅表副本,具体来说就 ...
- eclipse各版本代号
从2006年起,Eclipse基金会每年都会安排同步发布(simultaneous release).同步发布主要在6月进行,并且会在接下来的9月及2月释放出SR1及SR2版本.如下图所示的版本历史: ...