css-8.4-定位

最新推荐文章于 2022-11-05 20:49:25 发布
最新推荐文章于 2022-11-05 20:49:25 发布
阅读量304 收藏
点赞数 1
分类专栏： WEB前端 CSS 文章标签： CSS相对定位 CSS绝对定位 CSS固定定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/101292044
版权

css-8.4-定位

定位
1.定位与浮动一样，都是改变元素在正常文档流中的位置，对网页内容进行重新排版
2.当元素没有定位，出现在正常的文档流中，将不会受left、right、top、bottom和z-index的影响

定位属性
1.relative：相对定位
2.absolute：绝对定位
3.fixed：固定定位
4.static：默认，没有定位

注意
1.三种定位方法均使用top、right、bottom、left调整位置
2.当left和right同时存在时，left生效
3.当top和bottom同时存在时，top生效

一：relative：相对定位

position:relative;设置元素为相对定位，其定位机制
1.相对于自己原来在文档流中的位置定位，当不指定top、left等定位值时，不会改变元素位置
2.相对定位元素仍会占据原有文档流中的位置，不会释放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>realtive：相对定位</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		.div1{
			border: 1px solid #0ff;
			/* 相对定位
			元素原来的空间没有被释放 */
			position: relative;
			top: 50px;
			left: 50px;
		}
		.div2{
			background-color: #ff0;
		}
	</style>
</head>
<body>
	<div class="div1">相对定位</div>
	<div class="div2">未设定位</div>
</body>
</html>

效果图
在这里插入图片描述

二：absolute：绝对定位

position:absolute;设置元素为绝对定位，其定位机制
1.相对于第一个非static的祖先元素（即使用了relative、absolute、fixed定位的祖先元素）进行定位
2.如果所有祖先元素均未定位，则相对于浏览器左上角定位
3.使用absolute的元素会从文档流中完全删除，原有空间释放不再占据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">
		/* 当父元素未设置相对定位时
		div1相对浏览器左上角进行定位 */
		.wrap{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			margin: 0 auto;
			/* 父元素相对定位 */
			position: relative;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #ff0;
			line-height: 100px;
			text-align: center;
			/* 绝对定位 */
			position: absolute;
			top:50px;
			left: 50px;
		}
		/* div2不设置定位
		div1空间释放，被div2占据 */
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			line-height: 100px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">绝对定位</div>
		<div class="div2">未设定位</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

结论
1.当对div1进行定位时原来的空间会被释放，被未定位的div2所占据
2.当居中的父容器没有进行相对定位时，绝对定位的div1相对于浏览器左上角进行定位
3.当居中的父容器进行相对定位时，绝对定位的div1相对于居中的父元素的左上角进行定位

三：fixed：固定定位

  • 固定定位是一种特殊的绝对定位
  • 它于普通定位的区别是
    • 无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位
    • 固定在指定位置，不随浏览器滚动条的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		.wrap{
			width: 200px;
			height: 200px;
			border: 1px solid #f00;
			/* 居中 */
			margin: 0 auto;
			/* 相对定位
			固定定位的div1位置依旧不变 */
			position: relative;
		}
		/* 固定定位 */
		.div1{
			width: 100px;
			height: 100px;
			background-color: #ff0;
			line-height: 100px;
			text-align: center;
			position: fixed;
			top: 50px;
			left: 50px;
		}
		/* 不进行定位，占据div1位置 */
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			line-height: 100px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">固定定位</div>
		<div class="div2">未设定位</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

结论
1.当对div1进行固定定位时原来的空间会被释放，被未定位的div2所占据
2.即使父容器添加了相对定位，固定定位的div1依然相对于浏览器左上角定位

四：使用定位实现元素的绝对居中

  • 定位可以设置元素的绝对居中

基本思路
1.设置父子元素均为定位元素
2.对子元素进行设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>居中</title>
	<style type="text/css">
		.wrap{
			width: 200px;
			height: 200px;
			background-color: #ff0;
			/* 将父元素固定 */
			position: fixed;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			/* 子元素相对于浏览器进行定位 */
			margin: 50px;
			line-height: 100px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">div1</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>居中</title>
	<style type="text/css">
		.wrap{
			width: 200px;
			height: 200px;
			background-color: #ff0;
			margin: 0 auto;
			/* 相对定位 */
			position: relative;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			line-height: 100px;
			text-align: center;
			 /* 绝对定位 */
			position: absolute;
			top: 50%;
			margin-top:-50px; 
			left: 50%;
			margin-left: -50px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">div1</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

五：z-index

z-index
1.z-index的作用
2.z-index的使用要求
3.z-index:auto 和 z-index:0 的异同
4.z-index相同（处于同一平面的定位元素）的层叠关系

1、z-index的作用

  • 设置定位元素的层叠顺序

2、z-index的使用要求

  • 必须是定位（relative、absolute、fixed）元素才能使用 z-index
  • 使用 z-index需要考虑父容器的约束
    • 如果父容器没有设置 z-index，或父容器设置位 z-index:auto，则子容器的 z-index 可以不受父容器的约束
    • 如果父容器对 z-index 进行了设置，则子容器的层叠顺序将以父容器的 z-index为准（此时子元素的 z-index 只能调整自身与父容器中不同子元素之间的层叠顺序）

3、z-index:auto 和 z-index:0 的异同

  • z-index:auto 为默认值，与z-index:0 处于同一平面
  • z-index:auto 不会约束子元素的 z-index 层次，而 z-index:0 会约束子元素必须与父元素处于同一平面

4、z-index相同（处于同一平面的定位元素）的层叠关系

  • 后来者居上，即写在后面的元素在上一层
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位元素的层叠</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			text-align: center;
		}
		.div1{
			background-color: #ff0;
			position: absolute;
			top: 20px;
			left: 20px;
			/* 设置div1将在div2上 */
			z-index: 1;
		}
		.div2{
			background-color: #0ff;
			position: absolute;
			top:40px;
			left: 40px;
		}
	</style>
</head>
<body>
	<div class="div1">div1</div>
	<div class="div2">div2</div>
</body>
</html>

效果图
在这里插入图片描述

anh_qwh
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端开发css样式
04-17
### Web前端开发CSS样式：常用的CSS代码缩写详解 #### 一、十六进制颜色数值缩写 在CSS中，颜色通常使用十六进制表示法来定义。标准的颜色表示法是`#RRGGBB`，其中`RR`代表红色分量、`GG`代表绿色分量、`BB`代表...
CSS前端开发技术视频8.zip
06-11
1. **CSS选择器**：CSS的选择器是定位网页元素的基础工具，包括标签选择器、类选择器、ID选择器、属性选择器等。理解不同选择器的工作原理和优先级是CSS初学者的必修课。 2. **层叠与继承**：CSS的核心特性之一是...
CSS五种定位的区别
MixedSignals的博客
02-22 504
CSS五种定位的区别 CSS定位是非常重要的一种功能，可以将网页中的内容放在指定的位置，使网页布局工整美观。定位属性position一共有5个值，分别是static、relative、fixed、absolute、sticky。根据情况的不同，使用的属性值也大多不同，选择最合适的方法才能有最好的效果。它们的区别如下： ①static;这是定位的默认值，写和不写都一样，相当于没有定位，本身在哪就在那...
html入门（3）-css选择器和表格
读读书，敲敲代码，写写博客，思考思考人生。
04-10 410
一、CSS 概述(了解) *.CSS  ： Cascading Style Sheet 层叠样式表 *.CSS 作用就是给HTML页面标签添加各种样式 *.为什么用CSS HTML的缺陷： 1. 不能够适应多种设备          2. 要求浏览器必须智能化足够庞大  3. 数据和显示没有分开  4. 功能不够强大    CSS 优点： 1.使数据和显示分开 2.降低网络流量
品优购---品优购项目制作---8.4
weixin_50768118的博客
08-08 907
品优购首页制作、品优购列表页制作、品优购注册页制作、Web服务器
前端基础-CSS-06
L的博客
11-05 1499
内容涉及边偏移，定位模式，绝对定位的盒子居中，堆叠顺序，定位特性，以及综合案例，附有源码和效果展示。
http-info-syllabus
05-09
4.1 URL（统一资源定位符）的组成 4.2 URI（统一资源标识符）的概念与分类 4.3 协议、主机、路径、查询参数与片段标识符 五、HTTP缓存机制 5.1 强制缓存与对比缓存 5.2 Cache-Control与Expires头的使用 5.3 ETag与...
Css属性文档
10-20
**8.4 list-style** - **作用**：同时设置 `list-style-type`、`list-style-position` 和 `list-style-image`。 - **值**： - `<type>`：列表标记类型。 - `<position>`：标记位置。 - `<image>`：标记图像。 ...
selenium-python.pdf
06-26
CSS 选择器提供了一种更灵活的方式来定位元素： ```python element = driver.find_element_by_css_selector("#my_div > p") ``` #### 五、等待机制 Selenium 支持两种类型的等待机制：显式等待和隐式等待。 **...
JavaScript-3.5-JavaScript 函数-案例
QWH_PYTHON的博客
10-24 872
JavaScript-3.5-JavaScript 函数-案例案例一：使用函数实现计算机功能二：递归 案例 一：使用函数实现计算机功能 使用 prompt 输入两个数和运算符号，计算两个数的操作结果 使用 switch 判断运算符号，调用函数计算两数结果 <!DOCTYPE html> <html lang="en"> <head> <meta ch...
JavaScript-3.1-JavaScript 函数-函数的声明与调用
QWH_PYTHON的博客
10-18 566
JavaScript-3.0-JavaScript 函数-函数的声明与调用函数的声明与调用一：函数的声明1、有参函数2、无参函数二：函数的调用三：函数的作用域四：函数声明和调用的注意事项五：函数声明与函数调用没有先后之分 函数的声明与调用 函数的主要作用是将程序中需要重复使用的代码进行封装，从而可以使代码重复使用 函数的使用 声明 调用 一：函数的声明 在 JavaScript 中，函...
CSS-4.1-CSS选择器
QWH_PYTHON的博客
09-09 517
CSS-4.1-CSS选择器一：基本选择器1、标签选择器 CSS选择器 指定CSS要作用的标签，那个标签的名称就是选择器 CSS选择器分为两大类 1.基本选择器 2.扩展选择器 基本选择器 1.标签选择器：针对一类标签 2.类选择器：针对想要的所有标签使用 3.ID选择器：针对某一个特定的标签使用 4.通用选择器（通配符）：针对所有的标签都适用（不建议使用） 扩展选择器 1.后...
CSS3-7.5-飞机滑翔动画实现
QWH_PYTHON的博客
09-18 505
CSS3-7.5-飞机滑翔动画实现飞机滑翔动画实现 飞机滑翔动画实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机滑翔</title> <style type="text/css"> img{ ani...
HTML-1.1-HTML的介绍
QWH_PYTHON的博客
09-03 415
HTML-1.1-HTML的介绍一：HTML概述二：HTML的作用三：HTML的历史四：HTML的网络术语五：计算机编码的介绍1、ASCII码2、ANSI编码3、GBK4、Unicode编码（统一编码）5、UTF-8(Unicode Transform Format)编码6、中文能够使用的两种字符集7、避免乱码8、UTF-8和GB2313的比较六：HTML颜色介绍1、颜色表示2、RGB色彩模式 一...
JavaScript-4.5-BOM 与 DOM-案例
QWH_PYTHON的博客
11-13 400
JavaScript-4.5-BOM 与 DOM-案例案例一：简单的留言板 案例 一：简单的留言板 输入昵称和评论内容，单击“提交内容”按钮，可以将最新的评论插入到已有评论的下方 昵称和评论内容为空时，不能提交 提交后获取当前时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
CSS-8.2-CSS盒模型相关属性
QWH_PYTHON的博客
09-24 386
CSS-8.2-CSS盒模型相关属性一：overflow：内容溢出控制二：outline：外围线三：box-shadow：盒子阴影四：border-radius：边框圆角五：border-image：图片边框1、border-image-source：图片路径2、border-image-slice：图片切片宽度3、border-image-width：边框宽度4、border-image-rep...
CSS3-7.4-CSS3新增选择器
QWH_PYTHON的博客
09-18 380
CSS3-7.4-CSS3新增选择器一：属性选择器1、E[att]2、E[att="val"]3、E[att^="val"]4、E[att$="val"]5、E[att*="val"]二：结构伪类选择器1、E:nth-child(n)2、E:first-of-type3、E:only-child4、E:empty三：状态伪类选择器1、E:enabled2、E:disabled3、E:checked...
CSS-6.3-CSS常用背景属性
QWH_PYTHON的博客
09-13 373
CSS-6.3-CSS常用背景属性一：背景颜色属性1、background-color二：背景图像属性1、background-image2、background-repeat3、background-size4、backgrpund-position5、background-origin6、background-clip7、background-attachment8、background C...
css-in-css
最新发布
02-05
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。 在传统的CSS开发中，样式是全局共享的，容易造成样式冲突和难以维护。而CSS-in-CSS通过将样式封装在组件内部，实现了样式的局部作用域。这样一来，每个组件都可以拥有自己独立的样式规则，不会相互干扰。 CSS-in-CSS有多种实现方式，其中比较常见的有以下几种： 1. CSS Modules：CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值，实现了样式的局部作用域。在使用时，可以通过import语法引入CSS文件，并在组件中使用对应的类名。 2. CSS-in-JS：CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则，并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS Nesting：CSS Nesting是一种提案，旨在原生CSS中实现嵌套样式的语法。它使用类似于Sass的嵌套语法，可以更方便地描述组件内部的样式关系。目前，CSS Nesting还处于实验阶段，尚未得到所有浏览器的广泛支持。 总的来说，CSS-in-CSS是一种将CSS样式与组件紧密结合的开发方式，可以提高代码的可维护性和可重用性。不同的实现方式适用于不同的项目需求和开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值