- [ CSS入门 ]

二十,CSS定位概述与相对定位

2020-12-23  本文已影响0人  好多可乐

CSS定位:
position:relative(相对)/absolute(绝对)/ static(无定位)/ fixed(固定)
文档流:从上往下,从左到右
相对定位:
relative:相对于自己以前所在的位置进行定位,效果如下图(本来在左上角,设置相对定位和top,left属性后,红色方块进行了移动)

在这里插入图片描述

如果设置了相对定位以后,不输入具体的top/left值,这样相对定位可以做为一种容器父元素存在。

<html>
<head>
   <style type="text/css">
   .main{
    background-color: yellow;
   }
   .div1{
    height: 100px;
    width: 100px;
    position: relative;
    top: 10px;
    left: 20px;
    background-color: red;
   }
   </style>
</head>
<body>
 <div class="main">
上一篇下一篇

猜你喜欢

热点阅读