Java教程

java学习笔记（19）java中css的三种定位----绝对定位、相对定位、相对浏览器定位

本文主要是介绍java学习笔记（19）java中css的三种定位----绝对定位、相对定位、相对浏览器定位，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.绝对定位：当位置改变，该位置的坐标原点就会被释放，
后续的其他标签就可以占用该位置

  <style>
                  
                  .div1{
                      height: 200px;
                      width: 200px;
                      background-color:grey;
                      position: absolute;
                       /*absolute表示绝对定位*/
                      top: 200px;
                      left: 200px;
                  }
                   .div2{
                      height： 200px;
                      width： 200px；
                      background-color:burlywood;
                      position: absolute;
                      top: 400px;
                      left:500px;
                  }
                   
              </style>
              <body>
                  <div class="div2">
                      1
                  </div>
                  <div class="div2">
                      2
                  </div>
                  
              </body>

在这里插入图片描述

2.相对定位
相对于原来的位置，当位置发生改变了，
不会释放原来的位置，其他标签不能占用该标签原来的位置

 <style>
                  
                  .div1{
                      height: 200px;
                      width: 200px;
                      background-color:grey;
                      position: relative;
                       /*relative表示相对定位*/
                      top: 200px;
                      left: 200px;
                  }
                   .div2{
                      height： 200px;
                      width： 200px；
                      background-color:burlywood;
                      
                  }
                   
              </style>
              <body>
                  <div class="div2">
                      1
                  </div>
                  <div class="div2">
                      2
                  </div>
                  
              </body>

在这里插入图片描述

3.相对浏览器窗口定位
相对于浏览器的位置，不随页面的移动而移动
（一般可以做页面广告）

              <style>
                  
                  .div1{
                      height: 200px;
                      width: 200px;
                      background-color:grey;
                      position: fixed;
                       /*fixed表示相对浏览器窗口定位*/
                      top: 200px;
                      left: 200px;
                  }
                   .div2{
                      height： 200px;
                      width： 200px；
                      background-color:burlywood;
                      
                  }
                   
              </style>
              <body>
                  <div class="div2">
                      1
                  </div>
                  <div class="div2">
                      2
                  </div>
                  
              </body>

在这里插入图片描述
ps：个人学习笔记，如有错误请大佬指正（doge）

这篇关于java学习笔记（19）java中css的三种定位----绝对定位、相对定位、相对浏览器定位的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航