HTML中的定位

最新推荐文章于 2025-04-11 14:41:16 发布

疯狂的Jerry。

最新推荐文章于 2025-04-11 14:41:16 发布

阅读量1.1k

点赞数 21

文章标签： html

本文链接：https://blog.youkuaiyun.com/2401_88669699/article/details/143634529

版权

定位的定义

允许定义的标签相对于其正常位置，或者相对于父标签，另一个标签或者浏览器窗口而出现的位置

定位的分类

定位有三种相对定位绝对定位和固定定位

相对定位

相对于它的起点而移动原来的位置依然被占用。Left, right, top,b ottom｡这四个属性可以表示、相对定位标签的偏移量。

当标签的position属性被设置为1 relative时，开启相对定位。

1当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流。

绝对定位

绝对定位是不占空间的，运用了
绝对定位的标签会脱离原来的文档
流，浮动起来，因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位，
left right top bottom四个属性来
设置标签的偏移。

绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位。

固定定位

固定定位是一种特殊的定位，开启后会脱离文档流。永远定在屏幕的固定位置。

通过position fixed开启，用left right top bottom 来修饰其偏移量。

小米官网的模仿

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link href="css/index.css"rel="stylesheet"/>
       <style>
           .top_nav{
               background-color: black;
               min-width: 1400px;
           }
           .top_left{
               float: left;
           }
           .top_right{
               float: right;
           }
           .top_nav a{
               color: aliceblue;
               text-decoration: none;
           }
           .main_car{
               margin: auto;
               position: relative;
           }
           .main_logo{
               position: absolute;
               left: 50px;
               top: 50px;

           }
           .top_left_two{
               float: left;
               padding-left: 150px;
           }
           .main_back{
               position: fixed;
               right: 100px;
               bottom: 100px;
               color: aqua;
           }
           .main_phone{
               margin: auto;


           }
           .top_left_three{
               float: left;
               padding-left: 200px;
           }

           .top_right_two{
               float: right;
               padding-right: 150px;
           }

           .top_right_three{
               float: right;
               padding-right: 170px;
           }
           .main_wenzi{
               color: aqua;
               position: absolute;
               left: 30%;
               right: 30%;
           }
           .main_put{
               width: 200px;
               height: 50px;
               position: absolute;
               top: 130px;
               right: 170px;
           }
           .img src="xiaomibiaozhi.jpg" {
               border-radius: 20px;
           }



       </style>

   </head>
   <body bgcolor="#000000">

       
       <div class="top_nav">
           <div style="width: 1200px;margin: auto;padding: 10px;">
               <div class="top_left">
                   <a href="">小米官网</a >

               </div>
               <div class="top_right">
                   <a href="">登录|注册</a >

               </div>
               <div class="top_left_two">
                   <a href=""> 小米商城</a >
               </div>
               <div class="top_left_three">
                   <a href="">小米澎湃</a >
               </div>
               <div class="top_right_two">
                   <a href="">小米汽车</a >
               </div>
               <div class="top_right_three">
                   <a href="">云服务</a >
               </div>
               <div style="clear: both;"></div>
           </div>

       </div>
       <div class="main_car">
           <div class="main_logo">
               < img src="xiaomibiaozhi.jpg" style="width:150px;height:100px

制作较为简易，只能大致模仿。