JavaWeb_CSS（12）_定位_绝对定位

最新推荐文章于 2022-05-09 16:53:30 发布

魏宇轩

最新推荐文章于 2022-05-09 16:53:30 发布

阅读量689

点赞数

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 绝对定位

本文链接：https://blog.csdn.net/qq_36260974/article/details/88429289

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、绝对定位

设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置。
position: absolute;
设置绝对定位，当前的 div 脱离文档流，宽度变为 0。
left: 20px;
距离浏览器的左边框 20px。
top: 80px;
距离浏览器的上边框 20px，right：距离右边框，bottom：距离下边框。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title> www.weiyuxuan.com </title>
	</head>	
	<style type="text/css">	
		body
		{
			margin: 10px;
			font-size: 12px;
			font-family: Arial;
		}		
		.outside
		{
			width: 500px;
			height: 200px;
			background-color: #a9d6ff;
			border: 1px dashed black;
		}		
		.inside
		{
			padding: 10px;
			background-color: #fffcd3;
			border: 1px dashed black;
			width: 100px;
			position: absolute;
			left: 20px;
			top: 80px;
		}		
	</style>	
	<h1> 定位  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside"> 绝对定位 </div>
		</div>	
	</body>	
</html>

在这里插入图片描述

二、CSS 绝对定位对宽度的影响

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title> www.weiyuxuan.com </title>
	</head>	
	<style type="text/css">	
		body
		{
			margin: 10px;
			font-size: 12px;
			font-family: Arial;
		}		
		.outside
		{
			width: 500px;
			height: 200px;
			background-color: #a9d6ff;
			border: 1px dashed black;
		}		
		.inside
		{
			padding: 10px;
			background-color: #fffcd3;
			border: 1px dashed black;
			width: 100px;
			position: absolute;
			
			left: 20px;
			top: 80px;
			
			right:20px;
			bottom: 80px;
		}		
	</style>	
	<h1> 定位  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside"> 绝对定位 </div>
		</div>	
	</body>	
</html>