css属性—position的使用与页面的分层介绍
一、引言：
在css众多属性中，position算是里面用的比较多也相对来说比较重要的属性了，它对于单个标签的“定位”、标签之间的“相对位置定位”还有网页的分层来说十分重要！
二、“定位的实现”具体介绍
position属性下常用的有fixed、relative跟absolute方式，其中fixed是实现“固定在浏览器窗口的某个位置”的功能的；而relative单独用没有任何意义，绝大多数情况下都是relative+absolute联合使用的：
2.1 fixed介绍：
2.1.1 我们在浏览网页时，通常会看到不论网页怎么上下滚动，右下角总有一个“固定”的“返回顶部”的标签，这个标签就是用fixed做的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div style="width: 50px;height: 50px;background-color: #333333;color: #fafafa;
position: fixed;
bottom: 50px;
right: 50px;">返回顶部</div>
<div style="height: 5000px;background-color: grey"></div>
</body>
</html>
fixed
2.1.2 这里还有个例子，我们想实现“网页的头部不随着鼠标滚动一直留在顶部”的效果，这在实际中用的也非常多，具体代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-top{
background-color: #333333;
color:white;
position:fixed;
width:100%;
height:22px;
top:0;
text-align: center;
line-height:22px;
} .pg-home{
background-color:grey;
color:yellow;
height: 3333px;
margin-top:22px ;
text-align: center;
} </style>
</head>
<body>
<div class="pg-top">我是顶部</div>
<div class="pg-home">
<p>adasd</p>
<p>adaaasd</p>
<p>adcccasd</p>
<p>adavvsd</p>
<p>adaaasd</p>
<p>adzzzasd</p>
</div> </body>
</html>
fixed2
效果如下：
2.2 relative+absolute介绍
我们用这种模式绝大多数情况下是实现子类标签相对于父类标签的位置的，看下面的效果就明白了：
我们要实现上图所示的效果，利用relative+absolute就可以了，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.site-main{
position: relative;
border: 1px solid red;
margin: 0 auto;/*使div居中*/
height:200px;
width:500px;
} .main-l{
position: absolute;
left:0;
bottom:0;
width:50px;
height:50px;
background-color: yellow;
border: 1px solid green;
} .main-r{
position:absolute;
right:0;
bottom:0;
width:66px;
height:66px;
background-color: aqua;
border: 1px dashed orangered; } .main-m{
position: absolute;
right:230px;
bottom:0;
width:66px;
height:66px;
background-color: fuchsia;
border: 1px dashed sandybrown;
}
</style> </head> <body style="margin: 0 auto;">
<div class="site-main">
div1
<div class="main-l">div11</div>
</div>
<div class="site-main">
div2
<div class="main-r">div21</div>
</div>
<div class="site-main">
div3
<div class="main-m">div31</div>
</div> </body>
</html>
relative+absolute
三、页面分层介绍：
这里需要注意的是：我们写的网页如果不用position方法默认是在最底层，也就是第一层；如果利用position的fixed方法那么这个标签其实放置在了页面的第二层；如果再想在第二层上面放置一层的话，就要用到z-index了，z-index的值越大标签就在越上层！这里需要与margin属性配合使用进行定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.top{
z-index: 5;/*z-index的值谁大谁在上面*/
height: 255px;
background-color: green;
opacity:1;/*透明度*/
position: fixed;
top:0;
bottom:0;
left: 0;
right:0;
} .top-top{
z-index: 10;/*z-index的值谁大谁在上面*/
height:155px;
width: 155px;
background-color: white;
opacity:1;/*透明度*/
position: fixed;
top:50px;
left: 50%;
margin-left: -100px;
} </style>
</head>
<body style="margin:0 auto;">
<div class="top-top"></div>
<div class="top"></div>
<div style="height: 500px;background-color: grey;">dasdas</div> </body>
</html>
页面分层
效果如下：
最后需要注意的是：在具体开发时，我们一般都会默认使二三层隐藏（display:none），然后在一定的触发条件下改变二、三层的display值达到相应的效果。
css属性—position的使用与页面的分层介绍的更多相关文章
- CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
- css属性position的运用
随着web标准的规范化,网页的布局也随之千变万化.各种复杂漂亮有创意的页面布局冲 击这人们的视野,相比以前的table布局那就不是一等级的事儿.这个很大一部分功劳是css 样式的引入.而这个多样性布局 ...
- 详解 CSS 属性 - position
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- CSS之position体验
目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- CSS属性之position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- java 类方法和实例方法 以及 类变量和实例变量 各种区别
我们已经知道类体中的方法分为实例方法和类方法两种,用static修饰的是类方法.二者有什么区别呢?当一个类创建了一个对象后,这个对象就可以调用该类的方法. 当类的字节码文件被加载到内存时,类的实例方法 ...
- 下面有关 JAVA 异常类的描述,说法正确的有()
都是Throwable的子类: 1.Exception(异常) :是程序本身可以处理的异常. 2.Error(错误): 是程序无法处理的错误.这些错误表示故障发生于虚拟机自身.或者发生在虚拟机试图执行 ...
- Android 工具视频学习笔记_WDS
1. 由于Android源码过于庞大,SourceInsight会经常卡死,不适合了.适合的是Android Studio, 非常好用.使用手册上有介绍如何安装. 编译安卓的过程说明手册中也有. 3. ...
- Intellij IDEA2017.3永久激活方法
随着idea不断地发展,eclipse的缺点日渐明显,为了能够获得良好的编码体验,越来越多的朋友转向了idea,淘汰了eclipse但是由于近期idea所有私人服务器被封杀了,很多喜欢编码的朋友们都陷 ...
- e的故事.一个常数的传奇 (Eli Maor 著)
第1章 约翰*纳皮尔 (已看) 第2章 认知 (已看) 对数运算 第3章 财务问题 (已看) 第4章 若极限存在,则达之 (已看) 一些与e有关的奇妙的数 第5章 发现微积分的先驱 (已看) 第6章 ...
- Dynamic dispatch
Dynamic dispatch动态调度.动态分发 In computer science, dynamic dispatch is the process of selecting which im ...
- 实例对象与 new 命令
引用:https://wangdoc.com/javascript/oop/new.html JavaScript 语言的对象体系,不是基于"类"的,而是基于构造函数(constr ...
- VMware虚拟机安装红帽系统无法上网解决办法(转)
原文地址:https://www.aliyun.com/jiaocheng/146779.html 1.最近在vmware安装redhat 7.4虚拟机后无法上网,首先按照下文配置,能ping同宿主机 ...
- Java 解密错误InvalidKeyException: Illegal key size解决方法
做解密操作,出现如下错误 java.security.InvalidKeyException: Illegal key size // 设置解密模式为AES的CBC模式 Cipher cipher = ...
- Java MyBatis insert数据库数据后返回主键
<selectKey keyProperty="id" resultType="java.lang.Long" order="AFTER&quo ...