position: relative相对定位

最新推荐文章于 2024-03-09 16:15:33 发布

最初的节奏

最新推荐文章于 2024-03-09 16:15:33 发布

阅读量627

点赞数

分类专栏：前端文章标签： relative相对定位

本文链接：https://blog.csdn.net/qq_39443053/article/details/97681239

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

position: relative相对定位

      点关注不迷路，欢迎再来！

绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。

1. CSS引入position: relative

<style type="text/css">
.div {
	width: 100px;
	height: 10px;
	border: 2px;
	position: relative;
	left: 1000px;
	top: 10px
}
</style>

//style="border-radius: 200px;" 图片外侧加边框
<div class="div">
		<img class="double-border"  src="<%=request.getContextPath()%>/images/mangseng0.jpg"
		style="border-radius: 200px; width: 250px; height: 250px"   alt="">
</div>