CSS中定位方式有三种,分别是静态定位(static)、相对定位(relative)和绝对定位(absolute)。静态定位是默认的定位方式,元素的位置由文档流决定,无法通过top、bottom、le
CSS中定位方式有三种,分别是静态定位(static)、相对定位(relative)和绝对定位(absolute)。
静态定位是默认的定位方式,元素的位置由文档流决定,无法通过top、bottom、left、right属性进行调整。
div { position: static; }
相对定位相对于元素在文档流中的位置进行定位,可以通过top、bottom、left、right属性进行微调,并不会影响其他元素在文档流中的位置,其他元素的位置也不会对它有影响。
div { position: relative; top: 10px; left: 20px; }
绝对定位是相对于最近的非static定位的祖先元素进行定位,如果没有非static定位的祖先元素,则相对于body元素进行定位。可以通过top、bottom、left、right属性进行细致的定位,对其他元素的位置有影响。
div { position: absolute; top: 50px; right: 0; }
以一个简单的网页排版为例,如果我们需要将标题定位在页面的中心上方,并将正文放在标题的下面,可以这样实现:
header { position: relative; text-align: center; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } p { position: relative; top: 100px; }
使用CSS的定位方式,可以让我们在网页排版时更加自由灵活,实现各种各样的布局。
粉丝
0
关注
0
收藏
0