CSS（12）定位

2021/6/27 6:15:18

编程Tag： css 定位父级 border position Solid 12 1px

本文主要是介绍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;
 }

这篇关于CSS（12）定位的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS（12）定位

定位

相对定位

绝对定位

固定定位

相关编程文章