一天搞定CSS：定位position--17
2024-10-15 14:32:31
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
最新文章
- java程序设计线程池(newCachedThreadPool())
- WPF触发器的使用
- 三、jdk工具之jstack(Java Stack Trace)
- cardsui-for-android
- 【shell】if
- NOI冲刺计划2
- C/S结构与B/S结构的特点分析
- 自定义的插件如何加载到Qt Designer中(详细）
- xzzx
- 简单入门使用GitHub总结
- IOS学习【VMware 12 安装 Mac OS X 10.11】-Day1
- svn基本操作和图标介绍
- poj 3384 半平面交
- netty 服务器端流程调度Flow笔记
- API & Web API
- abap 断言
- ios 学习路线总结
- NOIP水题测试(2017082401)
- Linux常见问题总结【转】
- MT【114】构造二次函数