CSS定位 -- 笔记 - 图2review0428-1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>review0428-1</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         #div1{
  8.             background-color: red;
  9.         }
  10.         #div2{
  11.             background-color: yellow;
  12.             float: left;
  13.             width: 200px;
  14.             height: 200px;
  15.             top: 10px;
  16.             position: relative;
  17.         }
  18.         #div3{
  19.             background-color: blue;
  20.             float: left;
  21.             width: 220px;
  22.             height: 220px;
  23.         }
  24.         #div4{
  25.             background-color: black;
  26.             width: 240px;
  27.             height: 240px;
  28.         }
  29.         /*清除浮动的规范写法*/
  30.         #cleardiv::after{
  31.             content: "";
  32.             /*设置内容为空，但是content框架存在，内容为空*/
  33.             visibility: hidden;
  34.             /*设置为隐藏，与上面的content是一组操作*/
  35.             height: 0px;
  36.             /*设置行高为0*/
  37.             display: block;
  38.             /*显示为块状元素*/
  39.             clear: both;
  40.             /*最后进行清除*/
  41.         }
  42.         #cleardiv{
  43.             zoom:1;
  44.             /*ie浏览器专用*/
  45.             /*原理：使得页面里面的对象重新加载，重新计算*/
  46.             /*外边距重叠，或者浮动不能清除*/
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div id="div1">
  52.         <div id="div2"></div>
  53.         <div id="div3"></div>
  54.         <div id="cleardiv"></div>
  55.         <div id="div4"></div>
  56.     </div>
  57. </body>
  58. </html>

review0428-2

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>review0428-2</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         .main{
  8.             width: 600px;
  9.             height: 600px;
  10.             background-color: green;
  11.             position: relative;
  12.             top: 20px;
  13.             left: 20px;
  14.         }
  15.         .div1{
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: red;
  19.             position: absolute;
  20.             top: 20px;
  21.             left: 30px;
  22.         }
  23.         /*相对定位的偏移是自己之前的位置作为参照进行的一个偏移*/
  24.         /*相对定位不作为元素单独显示出来，而是作为父容器去包含其他元素而使用*/
  25.         /*子绝父相 -- （子元素设置绝对定位，父元素设置相对定位）*/
  26.         /*绝对定位相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就像对于最初的包含块（body）*/
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="main">
  31.         <div class="div1"></div>
  32.         相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。
  33.     </div>
  34. </body>
  35. </html>

review0428-3

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>review0428-3</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.         }
  11.         .div1{
  12.             background-color: red;
  13.             left: 100px;
  14.             top: 20px;
  15.             position: absolute;
  16.             z-index: 300;
  17.         }
  18.         .div2{
  19.             background-color: green;
  20.             left: 120px;
  21.             top: 40px;
  22.             position: absolute;
  23.             z-index: 200;
  24.         }
  25.         .div3{
  26.             background-color: blue;
  27.             left: 140px;
  28.             top: 60px;
  29.             position: absolute;
  30.             z-index: 100;
  31.         }
  32.         /*决定谁在前面，谁在后面，数字大小上不封顶*/
  33.         /*数值不适宜设置的过大，没意义。但是也适宜设置的过小，因为以后的页面的div很多，可以让他们一起重叠显示*/
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="div0">
  38.         <div class="div1"></div>
  39.         <div class="div2"></div>
  40.         <div class="div3"></div>
  41.     </div>
  42. </body>
  43. </html>

review0428-4

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>review0428-4</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         .div1{
  8.             width: 5%;
  9.             height: 100px;
  10.             position: fixed;
  11.             top: 200px;
  12.             left: 2%;
  13.             background-color: red;
  14.             /*5%+2%=7%*/
  15.         }
  16.         .div2{
  17.             width: 80%;
  18.             position: relative;
  19.             left: 10%;
  20.             /*100%-7%*2=86%*/
  21.         }
  22.         .div3{
  23.             width: 5%;
  24.             height: 100px;
  25.             position: fixed;
  26.             top: 200px;
  27.             right: 2%;
  28.             background-color: red;
  29.             /*5%+2%=7%*/
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="div1">左侧</div>
  35.     <div class="div2">
  36.         <p>
  37.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  38.         </p>
  39.         <p>
  40.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  41.         </p>
  42.         <p>
  43.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  44.         </p>
  45.         <p>
  46.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  47.         </p>
  48.         <p>
  49.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  50.         </p>
  51.         <p>
  52.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  53.         </p>
  54.         <p>
  55.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  56.         </p>
  57.         <p>
  58.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  59.         </p>
  60.         <p>
  61.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  62.         </p>
  63.         <p>
  64.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  65.         </p>
  66.         <p>
  67.             中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字中间文字
  68.         </p>
  69.     </div>
  70.     <div class="div3">右侧</div>
  71. </body>
  72. </html>

review0428-5

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>review0428-5</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         .div0{
  8.             width: 500px;
  9.             height: 300px;
  10.             position: relative;
  11.             background-color: #667766;
  12.             top: 150px;
  13.             left: 300px;
  14.         }
  15.         .img1{
  16.             width: 30px;
  17.             height: 45px;
  18.             position: absolute;
  19.             bottom: 10px;
  20.             right: 50px;
  21.         }
  22.         .div1{
  23.             width: 300px;
  24.             height: 200px;
  25.             background-color: red;
  26.             position: absolute;
  27.             top: 60px;
  28.             left: 100px;
  29.         }
  30.         .div2{
  31.             width: 30px;
  32.             height: 45px;
  33.             background-color: blue;
  34.             border-radius: 20px/30px;
  35.             text-align: center;
  36.             line-height: 45px;
  37.             color: #ffffff;
  38.             position: absolute;
  39.             left: -10px;
  40.             top: -10px;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="div0">
  46.         <div class="div1">
  47.             <div class="div2">5</div>
  48.             <img class="img1" src="cart.svg">
  49.         </div>
  50.     </div>
  51. </body>
  52. </html>