定位以及z-index
定位
定位用来控制元素的位置
定位的关键字是position,position有4个值,分别是relative,absolute,static,fixed当元素定位以后,元素有4个值可以用,分别是left,right,top,bottom.
我用以下几个例子来演示absolute绝对定位和relative相对定位
1.我定义了一个main里面套着三个div,部分代码如下
#main{
width: 800px;
height: 400px;
background: #ccc;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
}
#div2{
background: blue;
position: relative;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
<body>
<div id="main">
<div id="div1">a</div>
<div id="div2">b</div>
<div id="div3">c</div>
</div>
</body>
2.然后我给div2加了定位,如下
#div2{
background: blue;
position: relative;
left: 50px;
top: 50px;
}
由此可以看出,相对定位relative相对于元素初始位置,并且空间不释放
3.在1的基础上增加div2样式如下
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
由此可以看出,absolute相对于body定位,absolute空间释放
同样的 ,我将main用margin-left和margin-top让它向右下方蹿100px,而不用定位,然后将b做absolute定位,代码如下
#main{
width: 800px;
height: 400px;
background: #ccc;
margin-left: 100px;
margin-top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
此时可以看出absolute还是相对于body,因为我没有给main定位
4.在1的基础上增加main样式如下
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 50px;
top: 50px;
}
由此可得,当给main定位并且加参数时,会看到main带着三个div往下窜
5.在4的基础上,给div2添加样式,如下
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 50px;
top: 50px;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
空间还会释放,但b不再相对于body,而是相对于main.也就是说,某一个子元素定位并且是绝对定位,这个时候它相对于最近的已定位的祖先元素.
Static静态定位是默认值,元素出现在正常的流,没有left,right,top,bottom这四个值.
Fixed和absolute的唯一区别是:absolute是根据最近的定位的祖先元素确定自己的位置,而fixed永远根据浏览器确定位置,即使窗口为滚动窗口也不会移动.不占据空间.
z-index
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 100px;
top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
这段代码以及运行后如上图所示,但是现在我需要a在上面不被b覆盖,我需要改变它的层叠关系,这时候用到了z-index,它用控制定位元素的层级关系.z-index我将它翻译成z轴的索引.当我用z-index的时候,必须给当前的加定位,简单来说就是让谁在上面,就给谁定位然后加z-index.定位元素默认z-index=0.代码示例如下
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 100px;
top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
a看起来没动,但z-index值改变,绝对定位元素空间释放,所以c跑到a下面去了.
定位以及z-index的更多相关文章
- 快捷定位目录 z武器
z的源码在这里:https://github.com/rupa/z/blob/master/z.sh 1.把源码复制到你的用户目录下的z.sh文件, 2.然后用vim打开.bashrc这个目录,在最后 ...
- 前端2 — CSS — 更新完毕
1.CSS是什么? 指:Cascading Style Sheet --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...
- CSS定位（postion）和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS Positioning(定位)
Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...
- css显示display、可见性visibility、定位position、对齐
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS Position（定位）
CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...
- css总结1：position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- CSS：CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
随机推荐
- C#面向对象设计模式纵横谈——3.Abstract Factory 抽象工厂(创建型模式)
动机(Motivation) 在软件系统中经常面临着“一系列相互依赖的对象”的创建工作,同时,由于需求变化,往往存在更多系列对象的创建工作.如何应对这种变化?如何绕过常规对象的创建,提供一种“封装机制 ...
- 将文件移出版本控制 (Revision Control)
两条重要的 Git 命令: git rm -r -n --cached /path/to/the/directory git rm -r --cached /path/to/the/directory ...
- Mac OS使用brew安装Nginx、MySQL、PHP-FPM的LAMP开发环境
准备工作 新版的 Mac OS 内置了Apache 和 PHP,我的系统版本是OS X 10.9.3,可以通过以下命令查看Apache和PHP的版本号: httpd -v Server version ...
- Reset Identity Column Value in SQL Server (Identity Reset)
前言:今天在群里看到有人在问SQL Server自增值重置问题(sqlserver identiy column value reset ) 闲话少说,直接上代码: 正文: --create tabl ...
- 如何修改SharePoint2013服务器场帐号密码
服务器远程登录帐号密码修改密码后,如何修改sharepoint服务器场管理员账户密码,今天登录了一下N久以前的搭建sharepoint2013服务器场的一台服务器器,登录进去以后直接提示帐号密码过期需 ...
- H5+CSS3知识点
概要:CSS3美化样式.自定义字体图标.滤镜设置.CSS3选择器.transform2D转换.新增表单控件.vaild表单验证.表单样式美化等. 属性选择器: E[attr]只使用属性名,但没有确定任 ...
- JS 工具类
之前工作用的JavaScript比较多,总结了一下工具类,和大家分享一下,有不足之处还请多多见谅!! 1. 数组工具类(arrayUtils) var arrayUtils = {}; (functi ...
- Python：基本语法1
I.Python中的转义符注意情况 如果'本身是一个字符,则可将其用" "括起来: 如果字符串内部既有',又有",则可用转义字符\,比如: 'I\'m\"OK\ ...
- iOS小知识：使UIButton中的图片和文字实现左对齐
UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...
- WebService初学
作为一个初学者,在遇到新的知识点的时候,搞清这个知识点的名称含义,是有必要的.那什么是WebService呢? 顾名思义,它是一个运行在web上的服务.这个服务通过网络为我们的程序提供服务方法.类似一 ...