CSS中绝对定位和相对定位的区别及作用 |
您所在的位置：网站首页 › 义乌的地理位置绝对位置和相对位置的区别 › CSS中绝对定位和相对定位的区别及作用 |
CSS中绝对定位和相对定位的区别及作用
|
CSS中绝对定位和相对定位的区别及作用
针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语
针对定位的区别及使用我整理一些方法
css的学习中，开篇就是相对定位和绝对定位的使用，大家在学习的过程中不免被其绕晕，所以我按照自己的理解对其进行了整理及分析，仅供参考学习。 未进行定位，用以下面俩种定位的区别 可以将绝对定位理解为以浏览器为父节点来定位自己 代码如下（示例）： body { background-color: aquamarine; } div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 0; }
相对定位可以理解为“相对于”它的起点进行移动。 代码如下（示例）： body { background-color: aquamarine; } div { width: 100px; height: 100px; background-color: pink; position: relative; left: 0; top: 0; }
绝对定位使元素的位置与文档流无关，因此不占据空间。可以理解为绝对定位将元素从原来位置拿走，后面的元素就会占据绝对定位元素的位置。如同排队一样，前面的人走了，后面的人就会前进占去离开的人的位置。 body { background-color: aquamarine; } .box { width: 100px; height: 100px; background-color: pink; float: left; margin: 15px; } .twe { position:absolute; left: 20px; top: 20px; } 1 2 3 4
在日常的使用定位时，普遍以父节点为相对定位，子节点为绝对定位 此方法可简称为“子绝父相”。 .a{ width: 400px; height: 400px; position: relative; left: 100px; top: 100px; background-color: aquamarine; } .b { width: 100px; height: 100px; position: absolute; left: 100px; top: 100px; background-color: pink; }
以上就是我对绝对定位和相对定位的理解和整理，如果还对定位不太理解，可留言或私信我，我会尽可能的提供帮助。 如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！ |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |