css定位

最新推荐文章于 2024-08-09 11:41:07 发布
最新推荐文章于 2024-08-09 11:41:07 发布
阅读量61 收藏
点赞数
分类专栏： css 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/118107989
版权
前端 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
7 篇文章 0 订阅
订阅专栏

相对定位

使用

position:relative;来设定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.box1{
			width:200px;
			height:200px;
			background-color:red;
			
			/*如果当前盒子只设置相对定位，那么与标准流下的盒子没有什么区别*/
			position:relative;
			/*设置相对定位后，我们就可以使用四个方向的属性：left right top bottom
			相对定位，是相对于原来的本身定位。top:20px;盒子相对于原来的位置向下移动20px,也就是说与原来盒子的顶部距离为20px;相对定位
			仅仅微调我们的元素。
			*/
			left:20px;
			top:20px;
		}
	</style>
</head>
<body>
<div class="box1">

</div>
</body>
</html>

样式：
在这里插入图片描述

特性

不脱标
不脱离标准文档流。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   	div{
   		width:200px;
   		height:200px;
   	}
   	.box1{
   		background-color:red;
   	}
   	.box2{
   		background-color:green;
   		position:relative;
   		left:100px;
   		top:50px;
   	}
   	.box3{
   		background-color:blue;
   	}
   </style>
</head>
<body>
<div class="box1">

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

</div>
<div class="box3">

</div>
</body>
</html>

样式：
在这里插入图片描述

形影分离
盒子本身在老家，影子在到处飘。
老家留坑
盒子已经移到其他地方，原来的地方的空间还留着。

用途

相对定位在页面中没有什么大的作用，影响我们页面的布局，我们不要使用相对定位来做压盖效果。
有两个作用:

  • 微调元素位置信息
  • 做绝对定位的参考（父相子绝）

绝对定位

使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div{
			width:200px;
			height:200px;
		}
		.box1{
			background-color:red;
			/*绝对定位的盒子会脱离标准流。做遮盖效果，提升了层级*/
			position:absolute;
		}
		.box2{
			background-color:green;
		}
		.box3{
			background-color:blue;
		}
		span{
			/*设置绝对定位之后，不区分行内、块级元素，都可设置宽高*/
			width:100px;
			height:100px;
			background-color:pink;
			position:absolute;
		}
	</style>
</head>
<body>
<div class="box1">

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

</div>
<div class="box3">

</div>
<span>内容</span>
</body>
</html>

样式：
在这里插入图片描述
绝对定位参考点：

当使用top来描述的时候，是以页面的左上角（跟浏览器的左上角区分）为参考点调整位置。
当使用bottom属性描述的时候，是以首屏右下角为参考点。

特性

绝对定位的盒子会脱离标准流。
做遮盖效果。
设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

绝对定位无视父辈的padding

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父相子绝</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		.box{
			width:300px;
			height:300px;
			border: 5px solid red;
			margin: 50px 100px;
			position:relative;
			padding:50px;
		}
		.box p{
			width:100px;
			height:100px;
			background-color:pink;
			position:absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
<div class="box">
	<p></p>
	
</div>

</body>
</html>

样式：
在这里插入图片描述

父相子绝

父辈元素设置的相对定位，子元素设置绝对定位。会以设置相对定位的父辈元素的左上角为参考点。这个父辈元素不一定是父亲，也可以是爷爷。如果爷爷和父亲同时设置了相对定位，以父亲为参考点，也就是说以最近的设置了相对定位的父辈元素为参考点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父相子绝</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		.box{
			width:300px;
			height:300px;
			border: 5px solid red;
			margin: 50px 100px;
			position:relative;
			padding:50px;
		}
		.box p{
			width:100px;
			height:100px;
			background-color:pink;
			position:absolute;
			left:20px;
			top:100px;
		}
		.box2{
			width:200px;
			height:200px;
			background-color:green;
			
		}
	</style>
</head>
<body>
<div class="box">
	<div class="box2">
		<p></p>
	</div>
	
</div>

</body>
</html>

样式：
在这里插入图片描述

父绝子绝

父辈元素设置了绝对定位，以父辈元素为参考点。无实战意义。不会使用父绝子绝，因为绝对定位脱离标准流，影响页面布局。相反父相子绝在页面布局中使用很多，因为父元素设置相对定位不脱离标准文档流，子元素设置绝对定位，仅仅是在当前父辈元素内调整位置信息。

父固子绝

父辈元素设置了固定定位，以父辈元素为参考点

绝对定位盒子居中

设置绝对定位之后，margin：0 auto;不起任何作用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父相子绝</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		.box{
			width:100%;
			height:69px;
			background:#000;
		}
		.box2{
			width:960px;
			height:69px;
			position:absolute;
			background-color:pink;
			left:50%;
			margin-left:-480px;
			/*当作公式记下来：设置子元素绝对定位，left:50%,margin-left等于元素宽度的一半，实现绝对定位盒子剧中*/
		}
	</style>
</head>
<body>
<div class="box">
	<div class="box2"></div>
	
</div>

</body>
</html>

样式：
在这里插入图片描述

固定定位

固定定位：固定当前的元素不会随着页面滚动而滚动。
参考点：设置固定定位，用top描述是以浏览器的左上角为参考点。用bottom描述是以浏览器的左下角为参考点。
作用：可以做返回顶部栏，固定导航栏，小广告。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:100%;
			height:2000px;
			background-color:pink;
			background-image:url(./banner.png);
			background-repeat:no-repeat;
			background-position: center top;
		}
		p{
			width:100px;
			height:100px;
			background-color:green;
			position:fixed;
			left:20px;
			top:50%;
		}
	</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

特性

  1. 脱标
  2. 提升层级
  3. 固定不变，页面滚动，其位置相对浏览器不改变位置。

固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定导航栏</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		ul{
			list-style:none;
		}
		a{
			text-decoration:none;
		}
		.wrap{
			width:100%;
			height:49px;
			background-color:#000;
			position:fixed;
			top:0;
			left:0;
			/*设置固定定位之后一定要设置top和left属性*/
		}
		body{
			/*给body设置导航栏的高度，来显示下方图片的整个内容*/
			padding-top:49px;
		}
		.wrap .nav{
			width:960px;
			height:49px;
			margin:0 auto;
		}
		.wrap .nav ul li{
			float:left;
			width:160px;
			height:49px;
			background-color:green;
		}
		.wrap .nav ul li a{
			line-height:49px;
			font-size:20px;
			display:block;
			width:160px;
			height:49px;
			text-align:center;
		}
		.wrap .nav ul li a:hover{
			background-color:red;
			font-size:22px;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="nav">
		<ul>
			<li><a href="">网页导航</a></li>
			<li><a href="">网页导航</a></li>
			<li><a href="">网页导航</a></li>
			<li><a href="">网页导航</a></li>
			<li><a href="">网页导航</a></li>
			<li><a href="">网页导航</a></li>
		</ul>
	</div>
</div>
<div class="container">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
	<img src="./dingdang.jpg" alt="">
</div>

</body>
</html>

样式：
在这里插入图片描述

z-index属性

  1. z-index值表示谁压着谁
  2. 只有定位了的元素，才能有z-index，也就是睡哦，不管相对定位，绝对定位，固定定位都可以使用z-index，而浮动元素不能使用
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0
  4. 如果大家都没有z-index值，或者z-index值一样，那么谁卸载HTML后面，谁在上面压着谁，定位了的元素永远压着没有定位的元素
  5. 从父现象：父亲怂了，儿子再牛逼也没有用
no_name_sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css定位页面元素,页面元素定位-CSS元素基本定位
weixin_32147807的博客
08-04 2291
基本定位"""属性定位 一 """# #通过id# driver.find_element_by_css_selector("#kw").send_keys(u"博客园")# #通过class# driver.find_element_by_css_selector(".s_ipt").send_keys(u"博客园")#通过标签 数量过多的情况下需要增加标签过滤# driver.find_ele...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
CSS定位
Name_the_needy的博客
11-11 255
一、 浮动和定位的区别： 浮动：为半脱离文档流，虽然浮动但不脱离父框，仍占据位置，受其它元素影响，并且多个浮动元素会按顺序排列。脱离文档流是完全脱离父框，变性为行内块元素。 定位：除相对定位外，其它定位均完全脱离标准文档流 浮动回顾： 二、 固定定位：Position：fixed 释义：相对浏览器或position值非static的定位（static: 默认值“0”即取消定位） 用法步骤及案例： 三、 相对定位：positiong: Relative 释义：相对与自己原来的位置定位，进行位置的调整，不脱
CSS定位详解
yjp1240201821的博客
05-17 1374
本节主要讲解CSS定位，从其概念、定位机制、兄弟单位、绝对定位、固定定位等多个方面帮助深刻理解css定位。
Selenium使用CSS定位 总结
HONGTester的博客
11-19 1076
Selenium使用CSS定位总结，包括CSS定位和Xpath定位的区别
css定位属性
weixin_48180273的博客
01-28 4875
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
CSS定位与浮动
m0_49034593的博客
08-18 2182
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
selenium之css定位详解
王大傻的博客
02-22 8149
css定位 css概述： 1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。 3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。 css定位策略（方式）： 1、id选择器 2、class选择器 3、元素选择器 4、属性选择器 5、层级选择器 css定位方法：find_element_by_css_selector() 1
CSS定位布局详解
大河之犬的博客
10-03 7026
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
前端css定位.pdf
07-28
本人整理的css定位
css 定位应用实例
09-25
本篇将深入探讨CSS定位的应用实例，特别是如何利用`position`属性来实现灵活的页面布局。 首先，理解`position`属性至关重要。`position`属性有四个主要值：`static`、`relative`、`absolute`和`fixed`。默认情况下...
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
CSS 多按钮根据半圆弧度排列
前端技术
08-08 318
多个按钮根据弧度，延边均匀排列。
CSS（层叠样式表）
Chujun123528的博客
08-09 603
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
CSS基础
最新发布
weixin_45086164的博客
08-09 488
CSS基础
前端（HTML + CSS）学成在线项目（仿）
li3123537691的博客
08-06 459
头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中。头部区域分为：logo + 导航 + 搜索 + 用户四个小块。banner区域分为：左侧导航 + 背景图 + 右侧课程表。HTML（index.html）代码。精品推荐课程区域（版心居中）鼠标悬停 :hover效果。鼠标悬停 :hover效果。鼠标悬停 :hover效果。数据分析师区域（版心居中）编程入门区域（版心居中）
playwright css 定位
07-19
对于CSS定位，它本身并不直接提供对CSS定位语法的支持，如`position`, `left`, `top`, `relative`, `absolute`, 或者`fixed`等。然而，当你通过Playwright控制浏览器元素（例如通过`page.$`或`page.selectElement`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值