17.前端笔记-CSS-定位

已于 2022-12-04 20:00:27 修改
阅读量1.1k 收藏 5
点赞数
分类专栏： 前端-css 文章标签： css 前端 css3
于 2022-12-03 23:29:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128165116
版权

1、为什么要定位

先看看以下这些场景是否可以用标准流或浮动实现
（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
（2）滚动窗口时，某些盒子是可以固定在屏幕某个位置的
以上这种场景使用标准流和浮动无法快速实现，此时需要引入定位进行实现
浮动：可以让多个块级盒子一行没有缝隙排列展示，经常用于横向排列盒子
定位：可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

2、定位组成

定位：将盒子定在某个位置，定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式
边偏移：决定了该元素的最终位置

2.1 定位模式

决定元素的定位方式，通过css设置position属性

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

2.1.1 静态定位static

元素默认的定位方式，无定位的意思。还是按照标准流特性摆放位置，没有边偏移
因此定位在布局中很少用到

div{
	position:static;
}

2.1.2 相对定位relative(***)

相对定位是元素在移动位置时，是相对于它原来的位置来说的
（1）参照点是自己原来的位置(left:10px,表示左边相对于原来的位置偏移了10px)
（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置，与浮动不同 ）
（3）相对定位可以用来限制绝对定位

div{
	position:relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            top:50px;
            left: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

原来：
在这里插入图片描述
相对偏移之后：
在这里插入图片描述

2.1.2 绝对定位（***）

绝对定位是元素在移动位置时，相对于它的祖先元素来说的
语法：

div{
	position:absolute;
}

特点：
（1）没有祖先元素或祖先元素没有定位，则以浏览器为准定位，见示例（1.1）和（1.2）
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置，见示例（2.1）
（3）绝对定位会脱标，不再占用原先位置。其他标准流元素会占用原来绝对定位元素所在的位置 ,见示例（3.1）
（1.1）没有祖先元素：以浏览器为准定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="son"></div>
</body>
</html>

在这里插入图片描述
（1.2）有祖先元素，但祖先元素没有定位：以浏览器为准定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>
</html>

在这里插入图片描述
（2.1）祖先元素有定位，以最近一级有定位的祖先元素作为参考
grandfather>father>son
grandfather有定位，father无定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            position: relative;
        }
        .father{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            bottom: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        grandfather
        <div class="father">
            father
            <div class="son">son</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
（3.1）绝对定位的元素会脱标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            position: relative;
        }
        .box1{
            width:100px ;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 200px;
            top:200px
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    
</body>
</html>

添加绝对定位之前：
在这里插入图片描述
添加绝对定位之后：脱标
在这里插入图片描述

2.1.3 固定定位fixed(***)

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变
特点：

(1)以浏览器的可视窗口为参照点移动元素
和父元素没有关系
不随滚动而滚动
(2)固定定位不占用原先的位置（脱标）
固定定位可以看作是特殊的绝对定位

div{
	position:fixed;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .png img{
            width: 100px;
            height: 100px;
            position: fixed;
            top:50px;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="png">
        <img src="./1.jpg" alt="">
    </div>
    <div>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
    </div>
</body>
</html>

fixed固定定位

在这里插入图片描述

技巧：固定定位搭配版心右侧

算法：
（1）让固定定位的盒子left:50%,走到浏览器可视区的一半位置（版心）
（2）让固定定位的盒子margin-left:版心宽度的一半距离。版心右侧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background-color: green;
        }
        .bar{
            background-color: pink;
            width: 100px;
            height: 100px;
            position: fixed;
            left:50%;
            margin-left: 400px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="bar"></div>
    </div>
</body>
</html>

fixed固定到版心

2.1.4 粘性定位sticky

粘性定位可以看作是相对定位和固定定位的混合
实际不常用，IE不兼容。现在网页上看到的类似粘性定位的一般都是使用js实现

div{
position:sticky;
top:10px;
}

特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）粘性定位占用原先位置（相对定位特点）
（3）必须添加top\bottom\left\right其中一个属性才生效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 1000px;
        }
        .nav {
            width: 800px;
            height: 50px;
            margin: 50px auto;
            background-color: green;
            position: sticky;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">导航栏粘性定位</div>
    </div>

</body>

</html>

粘性定位sticky

2.2 边偏移

绝对盒子最终移动到什么位置
有top\bottom\left\right4个属性

边偏移属性示例描述
toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom:80px底部偏移量，定义元素相对其父元素下边线的距离
leftleft:80px左侧偏移量，定义元素相对其父元素左边线的距离
rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

3、子绝父相

子元素是绝对定位的话，父元素要用相对定位。
（1）子元素绝对定位，不会占用位置，可以放到父盒子的任何一个地方，不会影响其他的兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子内显示，否则子盒子就会以浏览器为基准进行偏移
（3）父盒子布局时，需要占有位置，因此选择绝对定位（不脱标）
总结：父级需要占用位置，因此是相对定位。子盒子不用占用位置，就是绝对定位

注意：子绝父相不是永远不变，如果父元素不需要站位置，子绝父绝也是可以的

4、定位的叠放顺序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用z-index控制盒子的前后次序（z轴）

div{
	z-index:1; 
}

（1）数值可以是正整数、负整数或0.默认是auto,数值越大，盒子越靠上
（2）如果属性值相同，则按照书写顺序，后来居上
（3）z-index值没有单位‘
（4）只有定位的盒子才有z-index属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .one{
            background-color: aquamarine;
            z-index: 2;
            top:100px
        }
        .two{
            background-color: skyblue;
            z-index: 1;
        }
        .three{
            background-color: green;
            left:100px;
        }
    </style>
</head>
<body>
    <div class="box one">one</div>
    <div class="box two">two</div>
    <div class="box three">three</div>
</body>
</html>

在这里插入图片描述

5、定位的拓展

5.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto实现水平居中
实现方法：
（1）需要定位的盒子挪到父盒子的50%
（2）需要定位的盒子向左挪动本身的一半宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            left:50%;
            margin-left: -100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

5.2 定位特殊特性

绝对定位和固定定位与浮动类似
（1）行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
（2）块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
        }
        div{
            background-color: skyblue;
            position: fixed;
        }
    </style>
</head>
<body>
    <span>span</span>
    <div>div内容</div>
</body>
</html>

在这里插入图片描述

5.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

5.4 绝对（固定）定位会完全压住盒子

（1）绝对（固定）定位元素会压住下面的标准流盒子及盒子中的文字图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(147, 45, 94, 0.4);
            position: fixed;
        }
        p{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <p>我是标准流</p>
</body>
</html>

在这里插入图片描述

（2）与浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里的文字或图片
原因：浮动产生的目的是做文字环绕效果的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(147, 45, 94, 0.4);
            float: left;
        }
        p{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <p>我是标准流</p>
</body>
</html>

在这里插入图片描述

MY Daisy
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-CSS-JS:关于前端的一些技巧
08-04
CSS嵌入HTML的第三种方式4-CSS嵌入HTML的第三种方式(外部的.CSS文件)5-display样式(隐藏列表)6-内补丁和外补丁7-去掉列表前边的标记8-定位样式position9-文本装饰样式10-浮动窗口11-鼠标悬停样式12-css笔记3....
前端 定位
JOJO123123123123的博客
10-09 100
position:absolute绝对定位 没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位 特性 特性： 1.元素脱离正常文档流，不占位(也脱离文本流，全脱) 2.有定位父级相对于定位父级发生定位偏移 3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html） 4.能使不能设置宽高的行级元素设置宽高 5.提升层级 6.如果没有定
前端----定位
m0_62697087的博客
01-28 546
1.定位 定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 2.定位组成 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。 定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位。 边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right 4个属性。例如：top：10p
前端定位实现
挣扎在前端之路的程序猿
03-18 1707
** 关于前端定位 首先，需要引入百度api &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;quot; src=&amp;amp;amp;quot;http://api.map.baidu.com/api?v=1.2&amp;amp;amp;amp;amp;ak=密匙&amp;amp;amp;quot;&amp;amp;amp;amp;g
前端基础——定位
qq_41721660的博客
04-08 4129
1.如何让盒子移动到指定的位置？ (1) 采用margin的负值，破坏文档流进行移动。应用场景为头部内容和banner部分重叠 (2) 采用定位技术 .banner{ width: 100%; height: 500px; margin: 0px; background-color: pink; } .first{ width: 800px;
前端学习07--定位
MXJU_的博客
01-24 493
定位
fedbook:前端修炼小册（Wenyuan's frontend developer book. Including HTML, CSS, JavaScript, etc.）
04-13
小册以点亮技能树为主，系统梳理前端开发及其周边知识点，作为学习笔记和复习资料。 目录 编程进阶 手写系列 面试相关 计划 支持 版权信息 鸣谢 文章 持续更新，学习不止。 风格指南 文档规范 代码风格 HTML 规范 ...
前端面试最新最全面经（带个人笔记）
05-23
包含近几年高频前端开发工程师面试题，每个题目都有详细答案和个人笔记。1.JavaScript章节包括：基础知识、ES6、原型与原型链、作用域链闭包、异步编程等。 2.Vue章节包括：Vue基础、生命周期、组件通信、路由、Vuex...
CSS_study:CSS3学习笔记和代码
04-18
CSS3狂神说Java系列-个人学习笔记CSS简介前端3大部分Html - 结构CSS - 表现，表皮JavaScript - 动态交互如何学习CSS是什么CSS怎么用-快速入门CSS选择器（如何定位，重难点）美化网页（文字，阴影，超链接，列表，...
HTML5与移动端web学习笔记
02-26
这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。App前端开发。使用的技术也是html+css+js，但它需要基于PhoneGap，ReactNative等开发平台调用手机核心...
css 定位脱标,17 css定位
weixin_33736210的博客
08-04 851
css定位定位是用来移动元素位置的。相对位置，参考元素原始位置，偏移某个距离绝对位置，参考点是最近的有定位的祖先元素，偏移某个距离定位1 css定位 相对定位 绝对定位 固定定位为什么移动元素设置元素在包含块中出现的位置，以及遮盖2 相对定位position: relative;参考自己原来的位置，偏移某个距离* 用途1 做一些位置微调2 配合绝对定位使用* 相对定位的元素不脱标，它原本所占的...
CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图...
weixin_30647065的博客
02-28 271
规避脱标 定位的盒子居中显示 Margin：0 auto ； 只能让标准流的盒子居中对齐 当A是B的父系，B可以使用 margin-left：auto； 来获得相当于定位right：0；的效果 Margin-right：auto； 定位的盒子剧中先左右走父元素盒子的一半50%，在向左走盒子的一半（margin-left：负值） 步骤: 设置父盒子为...
CSS定位方式
m0_60979337的博客
10-20 223
CSS定位方式
CSS 规避脱标之两种用法
weixin_30793643的博客
08-13 430
大家好，我是小强老师，今天讲解一小点知识哈 对比了才知道什么好 看不出，很漂亮吧！ 有木有倾国倾城的美色。 呵呵，好多东西也是这样的，好的东西只有对比了才觉得好。 我们知道我们网页布局 有三模式。 普通流normal flow（标准流、常规流） 浮动（float） 和 定位 （position） 标准流 标准流实际上就是一个网...
CSS弹窗
那片枫叶~
05-21 117
CSS 曲线弹窗和气泡弹窗小笔记，高德地图。标注气泡，背景是图片。
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 137
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 205
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css笔记总结2
fishniu35的博客
05-15 440
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
详解CSS（三）及案例实现
Romised的博客
05-21 389
弹性布局、弹性布局案例、flex 布局基本概念、常用属性、justify-content、align-items、案例实现：小广告、案例实现：百度热榜
x.unsqueeze(-1)
08-16
- *2* [PyTorch版《动手学深度学习》学习笔记 Task.4](https://download.csdn.net/download/weixin_38695773/14034979)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值