CSS-(4)定位

最新推荐文章于 2024-09-15 19:00:01 发布

慕澜mulan

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量555

点赞数 11

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_59753542/article/details/137124138

版权

本文详细解释了CSS中的四种定位方式：固定定位保持元素在浏览器窗口中的固定位置，相对定位基于原始位置进行移动但不脱离文档流，绝对定位相对于最近定位的祖先元素定位，而默认定位遵循文档流。通过实例展示了每种定位的实现和特点。

摘要由CSDN通过智能技术生成

定位方式

固定定位
相对定位
绝对定位
默认定位

1.固定定位

当前元素以浏览器位置进行定位，即元素的位置相对于浏览器窗口是固定位置，浏览器窗口改变大小也不会改变其位置，设置后，left 、 top 、 bottom 、 right 有效。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style>
			/* 设置固定定位的样式 */
			
			#myDiv {
				
				position: fixed;
				top: 40%;
				left: 40%;
				background-color: lightblue;
				padding: 20px;
				border: 1px solid black;
			}
		</style>
	</head>

	<body>

		<div id="myDiv">
			<h2>这是一个固定定位的元素</h2>
			<p>无论您如何滚动页面，该元素将保持在屏幕中心。</p>
		</div>

		<p>这是一些文本，用于演示固定定位。</p>
		<p>滚动页面以查看效果。</p>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</body>

</html>

效果图：

在上面的例子中，#myDiv 是一个使用固定定位的 div 元素，它将保持在屏幕中的一个位置。position: fixed 属性将元素固定在屏幕上，top: 50% 和 left: 50% 属性将元素居中放置，多个br标签使浏览器出现滚动条。当滚动滚动条的时候，#myDiv固定不动。

2.相对定位

相对定位是相对他自己原先的位置移动，元素移动后，原来的位置不变。定位的元素，可以通过left、right、top、bottom这四个属性设置新的位置。

关于相对定位的关键点：

(1) 相对于原始位置:相对定位的元素会相对于它在文档流中的原始位置进行移动。

(2)不脱离文档流：与绝对定位和固定定位不同，相对定位的元素不会脱离文档流。这意味着其他元素仍然会考虑它的原始位置进行布局。即相对定位后，原始位置会被保留。

(3)常用于创建偏移效果：相对定位经常用于微调元素的位置，或者在布局中创建特定的偏移效果。

(4)可与其他定位元素结合使用：相对定位的元素可以作为绝对定位元素的参考点。

示例:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>相对定位</title>  
    <style>  
        .box {  
            width: 100px;  
            height: 100px;  
            background-color: lightblue;  
            position: relative;  
            top: 20px;  
            left: 30px;  
        }  
    </style>  
</head>  
<body>  
    <div class="box"></div>  
</body>  
</html>

效果图：

在这个示例中，我们有一个容器 div，容器的宽度和高度为 100 像素，并设置了背景颜色。.box类应用了一个相对定位，并向下移动了20像素，向右移动了30像素。

3.绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，则相对于<body>，如果浏览器窗口改变大小，则会跟着改变，如果子元素是绝对定位，一般父元素需要设置为相对定位。

关于相对定位的关键点：

(1)脱离文档流：绝对定位的元素不再占用文档流中的空间，因此其他元素会忽略它的存在，就好像它不存在一样。即元素绝对定位后，不会保留原始位置。

(2)相对于最近的已定位祖先：绝对定位的元素是相对于其最近的已定位祖先元素（即position属性为absolute、relative或fixed的元素）进行定位的。如果没有这样的祖先元素，那么它会相对于初始包含块（通常是浏览器窗口）进行定位。即从需要定位的元素往所在的容器往外找，如果哪一层元素定位了则相对该元素进行定位，若不存在，则，相对浏览器进行定位。

(3)层叠上下文：绝对定位的元素会创建一个新的层叠上下文，这意味着它们可以影响其他元素的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>绝对定位</title>  
    <style>  
        .relative-container {  
            position: relative;  
            width: 300px;  
            height: 200px;  
            border: 1px solid black;  
        }  
          
        .absolute-box {  
            position: absolute;  
            top: 50px;  
            right: 20px;  
            width: 100px;  
            height: 100px;  
            background-color: lightblue;  
        }  
    </style>  
</head>  
<body>  
    <div class="relative-container">  
        <div class="absolute-box"></div>  
    </div>  
</body>  
</html>

效果图：

在这个示例中，.absolute-box类应用了一个绝对定位，并将其放置在.relative-container容器的右上方（因为.relative-container有一个相对定位）。无论.relative-container如何移动或改变大小，.absolute-box都将保持在其内部相对于其顶部的50像素和右侧的20像素的位置。