一天搞定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 ...
随机推荐
- 概率检索模型及BM25
概率排序原理 以往的向量空间模型是将query和文档使用向量表示然后计算其内容相似性来进行相关性估计的,而概率检索模型是一种直接对用户需求进行相关性的建模方法,一个query进来,将所有的文档分为两类 ...
- CLR via C#中的一个多线程例子
parallel的For和ForEach方法有一些重载版本允许传递三个委托 1.任务局部初始化委托(localInit),未参与工作的每一个任务都调用一次委托,在任务被要求处理前调用. 2.主体委托( ...
- 关于mpu6050的几个很好的帖子
最近在研究6050,真是很磨人啊,这个小东西还挺复杂,一个读取程序竟然需要600多行. 这几天连查资料找到了几个很好的帖子,要是以后有人看到这篇帖子,可以避免误入歧途,也可以省去很多时间. 1.阿西莫 ...
- React的学习（上）
摘要 众所周知,前端三大框架Angular.React.Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两 ...
- 运行第一个Docker容器
1. Docker介绍 Docker由dotCloud公司发起的一个内部项目,后来Docker火了,dotCloud公司改名为Docker了: Docker使用了Go语言开发,基于 Linux 内核的 ...
- iOS开发 - 适配Https的野路子
大致写下适配Https时遇到的坑,做完服务器迁移一直通宵到现在,表示无力再多做详解,只放一些常见问题的解决方案吧 问题一.Https请求失败 1. NetManager初始化时可参考如下设置(因为我没 ...
- SQL Server pivot 行转列遇到的问题
前段时间开发系统时,有个功能是动态加载列,于是就使用了SQL Server自带的PIVOT函数进行行转列,开始用的非常溜,效果非常好.但是提交测试后问题来了,测试添加的列名中包含空格,然后就杯具了,功 ...
- mysql行列转换方法总结
这是一道行转列并且构造交叉表的问题: http://topic.csdn.net/u/20090530/23/0b782674-4b0b-4cf5-bc1a-e8914aaee5ab.html 数据样 ...
- 分针网—IT教育：调皮的JavaScript
JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...
- Ajax与Pjax请求在服务端是如何识别的
我在后台处理ajax和一般的网页请求时,一般是需要额外加个参数进行区分的.比如使用get参数的is_ajax=1,后台判断有is_ajax=1成立时,表明该请求是ajax请求,遂可区分处理.我正在使用 ...