position定位及实际应用
position: static; 静态定位 / 常规定位 / 自然定位
忽略top/right/bottom/left/z-index的影响，使元素回到自然流中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width:100px;
height:100px;
line-height:100px;
text-align:center; position: relative;
top:10px;
}
.block:first-child{
border:1px solid;
}
.block:nth-child(2){
position: static;
border:1px solid red;
}
.block:nth-child(3){
border:1px solid blue;
}
.block:nth-child(4){
border:1px solid green;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
<div class="block">D</div>
</body>
</html>
设置margin:auto为水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width:100px;
height:100px;
line-height:100px;
text-align:center; position: static;
margin:auto;
}
.block:first-child{
border:1px solid;
}
.block:nth-child(2){
border:1px solid red;
}
.block:nth-child(3){
border:1px solid blue;
}
.block:nth-child(4){
border:1px solid green;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
<div class="block">D</div>
</body>
</html>
position:relative 相对定位
相对于自己在常规流中的位置，进行偏移
原来的空间依然预留
可以使浮动元素发生偏移，并控制堆叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width:100px;
height:100px;
line-height:100px;
text-align:center;
color:white; float:left;
position: relative; }
.block:first-child{
background:black;
z-index:2;
}
.block:nth-child(2){
background:red;
left:-50px;
z-index:1;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
</body>
</html>
position:absolute;
参照物是最近定位的祖先元素
如果没有祖先元素被定位，则默认为body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width:100px;
height:100px;
line-height:100px;
text-align:center;
border:2px solid; position: relative;
}
.block:nth-child(2){
border-color:red; position: absolute;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>
实现水平垂直居中定位：
1、给父元素设置：position: relative;
2、给子元素设置：
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
width:100px;
height:100px;
border:2px solid; position: relative;
}
.child{
width:40px;
height:40px;
border:2px solid;
border-color:red; position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
position:fixed;
继承position:absolute;的所有特征，区别是以视口做参照来定位
position:sticky;
与top偏移量结合使用
如果最近祖先元素有定位，则参考最近祖先元素；否则参考视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.banner{
width:1200px;
height:100px;
background:#abcdef;
margin:0 auto;
}
.nav{
width:1200px;
height:50px;
background:orange;
margin:0 auto;
position: sticky;
top:0;
}
.container{
width:1200px;
height:1000px;
background:pink;
margin:0 auto;
}
</style>
</head>
<body>
<div class="banner">海报大图</div>
<div class="nav">导航呀</div>
<div class="container">内容。。。</div>
</body>
</html>
相对于最近定位的祖先元素做参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.banner{
width:1200px;
height:100px;
background:#abcdef;
margin:0 auto;
}
.nav{
width:1200px;
height:50px;
background:orange;
margin:0 auto;
position: sticky;
top:20px;
}
.container{
width:1200px;
height:200px;
background:pink;
margin:0 auto;
position: relative;
overflow-y: scroll;
overflow-x: hidden; }
p{
height:1000px;
}
</style>
</head>
<body>
<div class="banner">海报大图</div>
<div class="container">
<div class="nav">导航呀</div>
<p>内容。。。</p>
</div>
</body>
</html>
导航在居中位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.banner{
width:1200px;
height:100px;
background:#abcdef;
margin:0 auto;
}
.nav{
width:1200px;
height:50px;
background:orange;
margin:0 auto;
position: sticky;
top:20px;
}
.container{
width:1200px;
height:200px;
background:pink;
margin:0 auto;
position: relative;
overflow-y: scroll;
overflow-x: hidden; }
p{
height:1000px;
}
p:first-child{
height:50px;
}
</style>
</head>
<body>
<div class="banner">海报大图</div>
<div class="container">
<p>内容。。。</p>
<div class="nav">居中导航呀</div>
<p>内容。。。</p>
</div>
</body>
</html>
www.caniuse.com 检测浏览器兼容性
弹出层的简单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
width:100%;
height:1000px;
background:url(bg.jpg) top center no-repeat;
}
.opacity{
width:100%;
height:100%;
background-color:rgba(0,0,0,.6);
position: fixed;
top:0;
left:0;
}
.login{
width:300px;
height:200px;
text-align:center;
line-height:200px;
position: fixed;
background-color:#fff;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="opacity"></div>
<div class="login">登录框~</div>
</body>
</html>
侧边栏导航实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
} ul{
list-style:none;
} .content{
width:100%;
height:1000px;
background:url(bg.jpg) top center no-repeat;
} .nav{
width:160px;
height:205px;
position: fixed;
left:0;
top:50%;
margin-top:-102px;
} .nav-li{
width:160px;
height:auto;
line-height:40px;
border-bottom:1px solid #fff;
color:#fff;
background:#333;
text-align: center;
cursor:pointer;
} .tit{
width:160px;
height:40px;
} .nav-li ul{
width:160px;
height:auto;
background:#fff;
display: none;
} .nav-li:hover ul{
display: block
} .nav-li ul li{
width:160px;
height:40px;
color:#333;
border-bottom:1px dashed #666;
text-align: center;
line-height:40px;
position: relative;
} .nav-li ul li:hover .subnav{
display: block;
} .subnav{
position: absolute;
width:160px;
height:auto;
top:0;
left:160px;
background:#444;
display: none;
} .subnav-item{
width:160px;
height:40px;
border-bottom:1px solid #fff;
color:#fff;
}
</style>
</head>
<body>
<div class="content">
<div class="nav">
<div class="nav-li">
<div class="tit">导航</div>
<ul>
<li>
二级导航
<div class="subnav">
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
</div>
</li>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
</ul>
</div>
<div class="nav-li">导航</div>
<div class="nav-li">导航</div>
<div class="nav-li">导航</div>
<div class="nav-li">
<div class="tit">导航</div>
<ul>
<li>
二级导航
<div class="subnav">
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
<div class="subnav-item">三级导航</div>
</div>
</li>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
</ul>
</div>
</div>
</div>
</body>
</html>
position定位及实际应用的更多相关文章
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- position定位的小问题
css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
- (转)Position定位：relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- 归纳篇（一）CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
随机推荐
- VirtualBox桥接网络，设置虚拟机联网，连接VirtualBox虚拟系统中的数据库等
由于最近搭建一个项目自己的阿里云的服务器内存不足,自己笔记本使用VitrualBox电脑虚拟linux系统来搭建,把这次使用过程遇到的问题记录下来也能帮助遇到同样的小伙伴. 软件: VirtualBo ...
- 看完这篇文章，再次遇到Jedis「Redis客户端」异常相信你不再怕了！
本文导读: [1] 疫情当前 [2] 应用异常监控 [3] Redis客户端异常分析 [4] Redis客户端问题引导分析 [5] 站在Redis客户端视角分析 [6] 站在Redis服务端视角分析 ...
- Linux密码策略--设置随机密码
#!/bin/bash # @Author: HanWei # @Date: -- :: # @Last Modified by: HanWei # @Last Modified -- :: # @E ...
- 用MYSQL的存储过程创建百万级测试数据表
创建随机字符串函数,便于创建名称 DROP function if EXISTS rand_string; #创建一个指定字符个数的函数 create function rand_string(n I ...
- Go语言实现：【剑指offer】第一个只出现一次的字符位置
该题目来源于牛客网<剑指offer>专题. 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1( ...
- Spark RDD基本概念、宽窄依赖、转换行为操作
目录 RDD概述 RDD的内部代码 案例 小总结 转换.行动算子 宽.窄依赖 Reference 本文介绍一下rdd的基本属性概念.rdd的转换/行动操作.rdd的宽/窄依赖. RDD:Resilie ...
- Linux 配置ip 子接口 多网卡绑定
linux系统配置ip地址,图形化界面略过,这里只介绍文本行.做以下设置注意是否有此权限 查看当前路由及网关信息: [root@localhost ~]# netstat -r Kernel IP r ...
- CentOS6.5安装指定的PHP版本（php5.5）（转）
查询是否安装有php #rpm -qa|grep php 删除之前安装的php版本 (yum install 安装) #rpm -e php-fpm-5.3.3-47.el6.x86_64 --nod ...
- Linux运维---磁盘存储-2. RAID
随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...
- 89组合margin、padding、float、clear问题
有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...