CSS定位布局
CSS定位布局
基础知识
在CSS布局中，定位布局也是一种非常常见的技术手段，我们以京东为例：
上面是非常好的例子，对于定位布局来说它可以将一个元素放在页面上的任意一个位置。
但是定位布局也不能滥用，因为它可能会出现一些意料之外的问题，所以我们只对一些需要定位的元素进行定位，而不需要定位的元素则使用文档流与浮动即可。
定位类型
我们可以对一个元素使用position让它来进行定位，共有以下的定位选项。
| 选项 | 说明 |
|---|---|
| static | 默认形为，参考文档流 |
| relative | 相对定位 |
| absolute | 绝对定位，脱离文档流 |
| fixed | 固定定位，脱离文档流 |
| sticky | 粘性定位 |
位置偏移
上面说过，定位布局就是为了将一个元素可以放在页面上的任意一个位置而产生的，那么我们就可以对某些以添加定位选项的定位元素设置上，下，左，右的位置偏移。
| 选项 | 说明 |
|---|---|
| top | 距离顶边 |
| bottom | 距离下边 |
| left | 距离左部 |
| right | 距离右边 |
相对定位
相对定位relative是相对于元素原本的位置进行控制，当元素发生偏移时，原位置保留（未脱离文档流，就会原位置留空）。
原本位置：
相对定位，距离顶边30px：
我们可以看到，下方的位置并没有去填补<img>原本的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
width: 200px;
height: 150px;
border: 2px solid blue;
}
article img{
width: 50px;
height: 50px;
position: relative;
top: 30px;
}
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
相对定位
绝对定位
绝对定位absolute是脱离于文档流的，你可以将它理解为漂浮，被绝对定位后的元素拥有inline-block特性（不独占一行，能设置宽高）。
此外还要注意一点，绝对定位的元素是会影响同级的正常文档流元素的，即后面元素会自动向上补齐。
可以看到，下面绝对定位后的<img>标签空间位置被<p>标签占用了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
div{ color: white;
padding: 1em;
position: absolute;
}
</style>
</head>
<body>
<div>设置了绝对定位，不独占一行了</div>
</body>
</html>
绝对定位元素不会独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
width: 200px;
height: 150px;
border: 2px solid blue;
}
article img{
width: 50px;
height: 50px;
position: absolute;
top: 30px;
}
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
绝对定位元素文档流空间位会被占据
参照元素
绝对定位的元素不受文档流的控制，所以默认它是按照页面左上角来进行偏移。
但是如果被绝对定位元素的父元素设置了relative或者fixed以及sticky定位的话，则该绝对定位子元素将会参照此父元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
article{
width: 200px;
height: 150px; color: white;
position: relative;
}
article img{
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
参照元素
默认位置
如果被定位的子元素没有设置任何偏移，那么它将会受到父元素padding等属性的影响。但是使用定位的元素一般都会进行偏移设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
article{
width: 200px;
height: 150px; color: white;
position: relative;
padding: 10px;
}
article img{
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
默认位置
设置尺寸
我们可以为定位的元素设定偏移值来改变该元素的尺寸大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
article{
width: 200px;
height: 150px; color: white;
position: relative;
}
article div{ position: absolute;
left: 30px;
top: 30px;
bottom: 30px;
right: 30px;
}
</style>
</head>
<body>
<article>
<div></div>
<p>我会占用同级绝对定位元素位置...</p>
</article>
</body>
</html>
设置尺寸
居中定位
通过将 left 设置为50% ,并向左偏移子元素宽度一半可以实现水平居中，垂直居中使用方式类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
article{
width: 200px;
height: 150px; color: white;
position: relative;
padding: 10px;
}
article img{
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px; }
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
居中定位
滚动行为
无论是绝对定位或者相对定位的元素，都会随着滚动条发生滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{ }
article{
width: 200px;
height: 150px; color: white;
position: relative;
padding: 10px;
/* 显示滚动条 Y轴 */
overflow-y: scroll;
}
article img{
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px; }
article p{
/* 内容足够长，出现滚动条 */
height: 500px;
}
</style>
</head>
<body>
<article>
<img src="./huaji.png" alt="">
<p>这是一个滑稽表情包...</p>
</article>
</body>
</html>
滚动行为
z-index
如果两个同级的元素都进行定位且位置相同，那么后定位的元素会层叠在先定位的元素之上，这个时候我们就需要用到z-index来改变层叠优先级。
未定位：
两个都进行绝对定位，依照蓝色父盒子的左上角，层叠在一起，可以看到只显示出一个，这是因为喷水滑稽比普通滑稽要大一点：
改变喷水滑稽的尺寸大小，就可以它下面的看见普通滑稽了。
此时我们可以将喷水的滑稽进行偏移挪开，或者使用z-index提升优先级，让原本在下面的普通滑稽层叠在喷水滑稽上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article section{
width: 200px;
height: 100px;
padding: 10px; position: relative;
}
article section img:first-of-type{
width: 80px;
position: absolute;
/* 默认的层叠都是0，所以我们提成1即可 */
z-index: 1;
}
article section img:last-of-type{
width: 80px;
position: absolute;
}
</style>
</head>
<body>
<article>
<section>
<img src="./huaji.png" alt="">
<!-- 排列在后的叠在排列前的上面 -->
<img src="./ps.png" alt="">
</section>
</article>
</body>
</html>
z-index
固定定位
固定定位fixed是脱离文档流（影响后面元素排列，固定定位元素不会留下空间）的一种定位方式，固定定位的元素不会随着滚动条进行滚动，它的偏移参照点是页面左上角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
main>button{
position: fixed;
height: 30px;
width: 100px; right: 2%;
bottom: 10%;
text-decoration: none;
}
main>section{
height: 600px;
}
main>section:nth-of-type(1){ }
main>section:nth-of-type(2){ }
main>section:nth-of-type(3){ }
main>section:nth-of-type(4){ }
main>section:last-of-type{
}
</style>
</head>
<body>
<main>
<span di="top">顶部</span>
<section> </section>
<section> </section>
<section> </section>
<section> </section>
<section> </section>
<button><a href="#top">返回顶部</a></button>
</main>
</body>
</html>
固定定位
粘性定位
同级粘性定位
同级粘性定位sticky是会进行层叠的，后面的粘性定位元素不会挤掉上面的粘性定位元素。
同级指的就是不同的粘性定位元素粘的是同一个父级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 100px; }
main {
border: 3px solid green;
width: 300px;
height: 200px;
overflow-y: scroll;
}
main section {
height: 700px;
text-align: center;
}
main section h2 {
color: white;
position: sticky;
top: 0;
}
main section h2:nth-of-type(even) {
}
main section h2:nth-of-type(odd) {
}
</style>
</head>
<body>
<main>
<section>
<h2>滑稽</h2>
<img src="./huaji.png" alt="">
<h2>喷水滑稽</h2>
<img src="./ps.png" alt="">
<h2>墨镜哥</h2>
<img src="./mjg.png" alt="">
<h2>眩晕怪</h2>
<img src="./xyg.png" alt="">
</section>
</main>
</body>
</html>
同级粘性定位
非同级粘性定位
非同级粘性定位sticky是不会进行层叠的，后面的粘性定位元素会挤掉上面的粘性定位元素。
非同级指的就是不同的粘性定位元素粘的不是同一个父级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img {
width: 100px;
}
main {
border: 3px solid green;
width: 300px;
height: 200px;
overflow-y: scroll;
}
main section{
height: 200px;
text-align: center;
}
main section h2 {
color: white;
position:sticky;
top:0;
}
main section:nth-of-type(even) h2 {
}
main section:nth-of-type(odd) h2 {
}
</style>
</head>
<body>
<main>
<section>
<h2>滑稽</h2>
<img src="./huaji.png" alt="">
</section>
<section>
<h2>喷水滑稽</h2>
<img src="./ps.png" alt="">
</section>
<section>
<h2>墨镜哥</h2>
<img src="./mjg.png" alt="">
</section>
<section>
<h2>眩晕怪</h2>
<img src="./xyg.png" alt="">
</section>
</main>
</body>
</html>
非同级粘性定位
定位使用场景代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
main {
width: 600px;
padding: 100px;
margin: 0 auto;
}
main article {
width: 150px;
position: relative;
cursor: pointer;
font-size: 14px;
color: #555;
}
main article:hover div:nth-of-type(1) {
border-bottom: none;
}
main article:hover div:nth-of-type(2) {
display: block;
}
main article div {
box-sizing: border-box;
height: 50px;
line-height: 3.5em;
text-align: center;
border: solid 2px blueviolet;
background: white;
}
main article div:nth-of-type(1) {
position: relative;
/* 掩盖第二个DIV的上边框线 */
z-index: 2;
}
main article div:nth-of-type(2) {
display: none;
position: absolute;
right: 0;
/* 掩盖上边框线 */
top: 48px;
left: -150px;
z-index: 1;
}
</style>
</head>
<body>
<main>
<article>
<div>我的购物车</div>
<div>购物车中暂无产品</div>
</article>
</main>
</body>
</html>
定位使用场景代码
CSS定位布局的更多相关文章
- css 定位布局
文档流: 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列.块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. 关于定位: 可以 ...
- CSS高级布局
float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽 ...
- web开发：定位布局
一.盒子的显隐 二.小米topbar 三.相对定位 四.决定定位 五.固定定位 六.z-index属性 七.流式布局思想 八.hover父子悬浮 一.盒子的显隐 1.同一结构下, 如果采用浮动布局,所 ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 css练习 定位布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- CSS定位与布局：浮动
浮动的特点 浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...
随机推荐
- 【vue】axios二次封装，更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- 虹软人脸识别——官方 Qt Demo 移植到 Linux
一.前言 最近需要在 Linux 平台下开发一个人脸识别相关的应用,用到了虹软的人脸识别 SDK.之前在 Windows 平台用过,感觉不错,SDK 里面还带了 Demo 可以快速看到效果.打开 Li ...
- Idea配置JRebel插件的详细配置及图解
Idea最新JRebel插件的详细配置及图解 地址:https://blog.csdn.net/nyotengu/article/details/80629631#commentBox Ⅰ安装jreb ...
- 佛祖保佑，永无BUG d=====(￣▽￣*)b
博主最近在网上看到了一个佛祖保佑永无BUG的帖子,各种符号画像层出不穷.也不知道是哪个人开的头,一堆人跟着转载. /** * 江城子 . 程序员之歌 * * 十年生死两茫茫,写程序,到天亮. * 千行 ...
- 补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.
补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.注释掉 pDC->BeginPath(); // 打开路径层 pDC->Rectangle(0,0,p ...
- P5774 [JSOI2016]病毒感染
题目描述 JOSI 的边陲小镇爆发了严重的 Jebola 病毒疫情,大批群众感染生命垂危.计算机科学家 JYY 采用最新的算法紧急研制出了 Jebola 疫苗,并火速前往灾区救治患者. 一共有 NN ...
- openstack cinder-backup流程与源码分析
在现在的云计算大数据环境下,备份容灾已经变成了一个炙手可热的话题,今天,和大家一起分享一下openstack是怎么做灾备的. [首先介绍快照] snapshot可以为volume创建快照,快照中保存了 ...
- IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法
1.IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100 ...
- html5中contenteditable属性如果过滤标签，过滤富文本样式
在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了.很明显我们不需要复制富文本样式,那么如何 ...
- wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群
wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群 官方文档使用 kubeadm 创建一个单主集群 环境初始化 建议尽可能初始化环境,命令wsl --unregister Ub ...