一天搞定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 ...
随机推荐
- Spring MVC执行原理
spring的MVC执行原理 1.spring mvc将所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求 进行真正的处理工作. 2.DispatcherSer ...
- 细谈UITabBarController
1.简述 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,UITabB ...
- Jenkins: 使用groovy + job-dsl 创建并触发job
Jenkins: 使用groovy + job-dsl 创建并触发job 背景: 我们的 Automation 测试脚本需要在10个不同语言的机器上跑,本地化测试产品. 我们用Jenkins启动测试执 ...
- html 压缩工具 html-minifier
https://github.com/kangax/html-minifier#options-quick-reference 1.参数列表 option Description Default re ...
- NODEJS环境搭建 第一篇 安装和部署NODEJS
一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 ...
- nginx负载均衡(一)
背景: 最近公司分配一个项目,做一个直播APP的后台,像这种随时都有用户在线的情况,后台一定不能down掉,而且只做一台服务器的话压力肯定很大,所以考虑用nginx做负载均衡 环境: 三台linux服 ...
- CF #April Fools Day Contest 2016 E Out of Controls
题目连接:http://codeforces.com/problemset/problem/656/E 愚人节专场的E,整个其实就是个Floyd算法,但是要求代码中不能包含 definedoforfo ...
- Asp.Net 网站一键部署技术（下）
上一篇我们讲了服务端的配置,现在我们来说说客户端的配置. 0x01: 使用Visual Studio发布向导创建发布配置文件 然后新建配置文件,因为我们的网站可能会发布到多个地方,比如发布一份内网测试 ...
- 机器学习笔记-1 Linear Regression(week 1)
1.Linear Regression with One variable Linear Regression is supervised learning algorithm, Because th ...
- 蓝桥杯-核桃的数量-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...