CSS(12)定位

定位

相对定位

 相对定位 : position: relative;
 相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
 top : 10px;     距离上方移动10px (向下)
 left
 bottom
 right :-20px;   距离右方移动-20px (向右)

html :

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../定位/style.css">
 ​
 </head>
 <body>
 ​
 <div class="box">
 ​
   <div class="div1">第一个盒子</div>
   <div class="div2">第二个盒子</div>
   <div class="div3">第三个盒子</div>
 ​
 </div>
 ​
 </body>
 </html>

css :

 .box{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
 }
 ​
 .div1{
   background: #779dbd;
   border: 1px solid #779dbd;
 ​
   /*
    相对定位 : position: relative;
    相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
    top : 10px;     距离上方移动10px (向下)
    left
    bottom
    right :-20px;   距离右方移动-20px (向右)
  */
   position: relative;
   right: -20px;
 }
 ​
 .div2{
   background: #2f70ff;
   border: 1px solid #2f70ff;
   position: relative;
   top: 10px;
 }
 ​
 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
 }

绝对定位

 绝对定位 :   position: absolute;
 1.没有父级元素定位的前提下,相当于浏览器定位
 2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
 3.在父级元素范围内移动
 相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不存在标准文档流中,原来的位置不会被保留

父级定位:

 .box{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
   position: relative;
 }

绝对定位:

 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
   position: absolute;
   left: 300px;
 }

html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../定位/style.css">
 ​
 </head>
 <body>
 ​
 <div class="box">
 ​
   <div class="div1">第一个盒子</div>
   <div class="div2">第二个盒子</div>
   <div class="div3">第三个盒子</div>
 ​
 </div>
 ​
 </body>
 </html>

css:

 .box{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
   position: relative;
 }
 ​
 .div1{
   background: #779dbd;
   border: 1px solid #779dbd;
 ​
   /*
    相对定位 : position: relative;
    相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
    top : 10px;     距离上方移动10px (向下)
    left
    bottom
    right :-20px;   距离右方移动-20px (向右)
  */
   /*position: relative;
  right: -20px;*/
 }
 ​
 .div2{
   background: #2f70ff;
   border: 1px solid #2f70ff;
   /*position: relative;
  top: 10px;*/
 }
 ​
 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
 ​
   /*
    绝对定位 :   position: absolute;
    1.没有父级元素定位的前提下,相当于浏览器定位
    2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
    3.在父级元素范围内移动
    相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不存在标准文档流中,原来的位置不会被保留
  */
   position: absolute;
   left: 300px;
 }

固定定位

 固定定位 : position: fixed;

html :

 <div class="div4">div4</div>
 <div class="div5">div5</div>

css:

 .div4{
   width: 100px;
   height: 100px;
   background: #c3d23b;
   border: 2px solid #c3d23b;
   position: absolute;
   right: 0;
   bottom: 0;
 }
 ​
 .div5{
   width: 50px;
   height: 50px;
   background: #ce3939;
   border: 2px solid #ce3939;
 ​
   /*固定定位 : position: fixed;*/
   position: fixed;
   right: 0;
   bottom: 0;
 }

 

上一篇:移动端适配flexible rem布局方案


下一篇:好看的table-css样式