HTML的定位属性_html div的top和right-优快云博客

本文链接：https://blog.youkuaiyun.com/hunanlixiang/article/details/148194981

来写个盒子

定位属性

position：absolute

left:( )px————————距离"左"边距（向右移动）

right：()px————————距离"右"边距（向左移动）

top：()px————————距离"上"边距（向下移动）

bottom：()px-——————距离"下"边距（向上移动）

枯燥无味的理论不如实操

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
 
      #div1{
             width: 60px;              
            height: 60px;
            background-color: red;
          }  
      
      #div2{
            width: 40px;
            height: 40px;
            background-color: green;
          } 
 
      #div3{
            width: 50px;
            height: 50px;
            background-color: white;
          } 
      
      #div4{
            width: 50px;
            height: 50px;
            background-color: white;
          } 
 
      #div5{
            width: 250px;
            height: 50px;
            background-color: white;
          } 
 
    article{
            width: 400px;
            height: 400px;
            background-color: gray;
        }
 
    </style>
 
  </head>
 
  <body>
 
    <article>
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5" align="center">5</div>
    </article>
 
  </body>
</html>

我想只靠这样本足够变成一个好看的样子

<style>
 
      #div1{
             width: 60px;              
            height: 60px;
            background-color: red;
            position: absolute;
            left: 175px; 
            /*向右移动*/
             top: 155px;
            /*向下移动*/
          }  
      
      #div2{
            width: 40px;
            height: 40px;
            background-color: green;
            position: absolute; 
            left: 185px;
            /*向右移动*/
            top: 165px; 
            /*向下移动*/
          } 
 
      #div3{
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute; 
            left: 70px; 
            /*向右移动*/
            top: 70px; 
            /*向下移动*/
          } 
      
      #div4{
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute; 
            left: 280px; 
            /*向右移动*/
            top: 70px; 
            /*向下移动*/
          } 
 
      #div5{
            width: 250px;
            height: 50px;
            background-color: white;
            position: absolute; 
            left: 75px; 
            /*向右移动*/
            top: 270px; 
            /*向下移动*/
          } 
 
    article{
            width: 400px;
            height: 400px;
            background-color: gray;
 
            position: absolute;
            left: 450px;
            /*向右移动*/
            top: 100px;
            /*向下移动*/
        }
 
    </style>

完工！