欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > 前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)

前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)

2025/3/19 11:23:45 来源:https://blog.csdn.net/As977_/article/details/143531740  浏览:    关键词:前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)

一、相对定位

使用相对定位的盒子会相对于自身原本的位置,通过偏移指定的距离,到达新的位置。盒子的本体仍处于文档流中。使用相对定位,除了要将 position 属性值设置为 relative 外,还需要指定一定的偏移量。其中,水平方向的偏移量由 lett right 属性指定;垂直方向的偏移量由 top  bottom 属性指定。

⚠️:两个方向各选一个参数即可定位;定位的数值可以为负数。

举个栗子

① 先放三个盒子,注意盒子的位置为“自上向下排列”。前面的知识点有提过“块元素一般从上到下排列摆放”。

<head><style>div{width: 100px;height: 100px;border: 5px rgb(61, 148, 247) solid;}<style>
</head>
<body><div></div><div></div><div></div>
</body>

运行结果: 

② 然后我们设置一下第一个盒子的颜色和相对定位。

<head><style>#div1{border: 5px rgb(241, 76, 175) solid;position:relative;  /*设置相对定位*/left: 70px;  /*距离父容器左端70px*/top: 50px;   /*距离父容器顶端50px*/}</style>
</head>
<body><div id="div1"></div>
</body>

 可以看到盒子相对于父容器产生了偏移。注意这时下面的盒子并没有往上移动,仍在原来的位置。这是由于盒子的本体仍处于文档流中。

做个小练习

老规矩先看图自己敲出代码,不懂再看代码~

<head><style>img{width: 100px;height: 100px;/* 盒子边框的厚度 颜色 样式 */border: 2px red solid;left: 10px;}#img1{width: 100px;height: 100px;border: 6px rgba(132, 230, 166, 0.815) solid;}#img2{width: 100px;height: 100px;border: 6px rgba(235, 238, 140, 0.858) solid;position:relative;left: 70px;top: 50px;}#img3{width: 100px;height: 100px;border: 6px rgba(125, 225, 231, 0.815) solid;position:relative;left: 10px;}</style>
</head>
<body><img src="./苹果.jpg" id="img1"><img src="./苹果.jpg" id="img2"><img src="./苹果.jpg" id="img3"><br><img src="./苹果.jpg"><img src="./苹果.jpg"><img src="./苹果.jpg">
</bdoy>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词