一天搞定CSS：定位position--17
1.定位取值概览
2.相对定位relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
color: #fff;
}
.div1{
background: red;
}
.div2{
background: green;
/*margin: 200px 0 0 200px;*/
position: relative;
left: 200px;
top: 200px;
}
.div3{
background: blue;
}
span{
background: red;
color: #fff;
position: relative;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--
position 定位
relative 相对定位
移动的方向
top、right、bottom、left
特点
1、只加相对定位，不设置元素移动的位置，元素和之前是没有变化
2、根据自己原来的位置计算移动的位置
3、不脱离文档流，元素移走以后，原来的位置还会被保留
4、加上相对定位后对原来的元素本身的特征没有影响
5、提升层级
-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<span>span</span>
</body>
</html>
效果图
3.绝对定位absolute
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
/*margin: 0;*/
position: relative;
}
div{
width: 200px;
height: 200px;
color: #fff;
}
.div1{
background: red;
}
.div2{
background: green;
position: absolute;
left: 200px;
top: 400px;
}
.div3{
background: blue;
position: absolute;
top: 400px;
}
span{
background: #ccc;
color: #fff;
position: absolute;
width: 200px;
height: 200px;
left: 400px;
}
</style>
</head>
<body>
<!--
absolute 绝对定位
移动的方向
top、right、bottom、left
特点
1、完全脱离文档流
2、行内元素支持所有样式（与加上浮动或者inline-block以后的效果是一样的）
3、如果父级有定位，那位置会根据父级移动。如果父级没有定位，那位置根据可视区移动
(一般情况下，要用到绝对定位的时候，都会给父级来一个相对定位)
4、提升层级
5、触发BFC
-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<span>span</span>
</body>
</html>
效果图
4.固定定位fixed
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
position: fixed;
right: 0;
bottom: 0;
background: red;
}
span{
width: 100px;
height: 100px;
background: green;
position: fixed;
left: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--
fixed 固定定位
移动的方向
top、right、bottom、left
特点
1、完全脱离文档流
2、行内元素支持所有样式（与加上浮动或者inline-block以后的效果是一样的）
3、相对可视区来移动位置
4、提升层级
5、触发BFC
注意
IE6不支持
-->
<div class="div1">div1</div>
<span>span</span>
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
页面内容<br />
</body>
</html>
5.默认值static
默认值，不定位
6.层级问题z-index
既然有定位，那么就会出现元素间相互重叠的问题。重叠时显示谁的内容呢？
详情见下一节，z-index来控制层级
链接地址：http://blog.csdn.net/baidu_37107022/article/details/71642885
一天搞定CSS：定位position--17的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- css定位position认识
1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...
- 一天搞定CSS：层级(z-index)--18
因为定位的出现,所以有了元素重叠的情况,此时就出现了显示谁的情况.在多层布局时,容易出现这种情况 定位position见:http://blog.csdn.net/baidu_37107022/art ...
- CSS定位position
position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- css 定位position总结
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- Instrument详解
Instruments用户指南介绍Instruments是应用程序用来动态跟踪和分析Mac OS X和iOS代码的实用工具.这是一个灵活而强大的工具,它让你可以跟踪一个或多个进程,并检查收集的数据.这 ...
- 分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置（单点安装）——第一篇
分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置(单点安装)--第一篇 简介 首先简单了解一下基础概念,FastDFS是一个开源的轻量级分布式文件系统,由 ...
- Java Tomcat 启动失败的解决思路
好久没写新博文了,离自己要求的每年几篇的目标也是渐行渐远. 最近在学习Java,也是从基础学习,因为我是一个.net开发人员,所以学习的成本相对低些.Java JDK,JRE,Tomact 的安装及配 ...
- java.net.SocketException: Broken pipe 异常可能的原因
org.apache.catalina.connector.ClientAbortException: java.net.SocketException: Broken pipe at org.apa ...
- mysql行列转换方法总结
这是一道行转列并且构造交叉表的问题: http://topic.csdn.net/u/20090530/23/0b782674-4b0b-4cf5-bc1a-e8914aaee5ab.html 数据样 ...
- 【lucene系列学习】排序
用lucene3实现搜索多字段并排序功能(设置权重)
- npm install fetchmatedata慢的解决办法
最近在开发webpack工程时,第一步npm install这里超级慢,一直停着,显示:"fetchMetadata: sill mapToRegistry uri https://regi ...
- yum 安装redis 及简单命令（推荐测试环境，安装简单）
第1章 redis 入门 1.1 yum 安装 安装repo源 cd /etc/yum.repos.d/ wget http://mirrors.aliyun.com/repo/epel-6.repo ...
- jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
- TPshop手机新模板的用户消息实现
今天在开发TPshop的手机新模板的消息页面,姑且记录一下. 首先,点击下方右上角,进入消息页面: 数据库中目前模拟了三条数据,有: 点击上图右上角,有: 这个 消息设置 功能是新增的,而且类型由原本 ...