6.css的定位

鄭乾啊發表於2020-09-29

定位
在這裡插入圖片描述

兩大元素
塊級元素：div h1~h6 ul li ol table p 等等
內聯元素：a span img input等等

<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
margin-right: 10px;
}
</style>

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
按標準流排序的話，div按一行一行排列，而span排在一行，排不滿才換下一行

定位屬性position
position屬性決定了元素將如何定位
通過top，right、bottom，left實現位置

static 預設排列
relative 相對
可以通過left，top，right，bottom來改變位置

.test{
width:100px;
height: 100px;
background:red ;
position:relative;
left:0;
top:100px;
相當於增加離左邊和上邊的距離
}

但如果是right和bottom則相反：
在這裡插入圖片描述

absolute 絕對

脫離了文件流，是絕對的位置定位，left和top方向大小都類似。相對於整個文件

一般用父級relative，子級用absolute

fixed
脫離正常文件流，固定元素

inherit
繼承

.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
left: 200px;
top: 200px;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
left: 100px;
top: 100px;
}

在這裡插入圖片描述
子元素繼承父元素的fixed，進行固定定位

所有帶有定位屬性的元素都是有層級的
在這裡插入圖片描述
z-index可以改變定位元素的層級，預設是為0的

.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
z-index:-1;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
z-index:1;
}

盒子模型和定位的區別：
盒子模型是通過改變margin和padding來實現元素的移動。
定位是通過元素的位置來移動


.login{
	width: 360px;
	height: 360px;
	background: url("login.png"）no-repeat;
	position:fixed;
	/*實現水平居中*/
	left: 50%;
	top:50%;
	margin-left:-180px; 寬度的一半
	margin-top: -180px; 高度的一半
}

實現網頁小案例網頁跟隨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .page{
            width: 100%;
            height: 4043px;
            background: url("mooc.png") center top no-repeat;
        }
        
        .nav{
            width: 160px;
            height: 205px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -103px;
            font-family: 'Miscrosoft YaHei';
        }
        
        .nav-li{
            width: 160px;
            height: auto;
            border-bottom: 1px solid #FFF;
            background: #333;
            text-align: center;
            line-height: 40px;
            color: #FFF;
            font-size: 16px;
            cursor: pointer;
        }
        
        .tit{
            width: 160px;
            height: 40px;
        }
        
        .nav-li:hover ul{
            display: block;
        }
        
        .nav-li ul{
            width: 160px;
            height: auto;
            background: #FFF;
            display: none;
        }
        
        .nav-li ul li{
            width: 160px;
            height: 40px;
            border-bottom: 1px dashed #666;
            color: #333;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        
        .nav-li ul li:hover .list-3{
            display: block;
        }
        
        .list-3{
            width: 160px;
            height: auto;
            position: absolute;
            left: 160px;
            top: 0px;
            display: none;
        }
        
        .list-3Dom{
            width: 160px;
            height: 40px;
            background: #444;
            border-bottom: 1px solid #FFF;
            text-align: center;
            line-height: 40px;
            color: #FFF;
        }
        
    </style>
</head>
<body>
    <div class="page">
        <div class="nav">
            <div class="nav-li">
                 <div class="tit">yh網的標題</div>
                 <ul>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>                                 
                 </ul>     
            </div>
            <div class="nav-li">
                 <div class="tit">yg網的標題</div>
                 <ul>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>                                 
                 </ul>        
            </div>
            <div class="nav-li">
                 <div class="tit">yg的標題</div>
                 <ul>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>                                 
                 </ul>        
            </div>
            <div class="nav-li">
                 <div class="tit">33網的標題</div>
                 <ul>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>                                 
                 </ul>         
            </div>
            <div class="nav-li">
                 <div class="tit">6756的標題</div>
                 <ul>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>
                     <li>
                         二級欄目
                         <div class="list-3">
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>
                             <div class="list-3Dom">三級欄目</div>                                                          
                         </div>
                     </li>                                 
                 </ul>        
            </div>                                    
        </div>
    </div>
 
</body>
</html>

NEXT:
頁面佈局：
多行佈局，多列布局，聖盃佈局，雙飛翼佈局。

在這裡插入圖片描述

元素的相對定位與絕對定位
2017-04-28
1-相對定位、絕對定位和固定定位的區別
2019-01-31
CSS中的絕對定位與相對定位
2017-11-27
CSS
html中的定位
2018-08-19
HTML
CSS的定位：position
2018-11-25
CSS
iOS 地圖定位定位
2018-12-20
iOS地圖
css絕對定位和相對定位的差別
2018-07-11
CSS
css中絕對定位與相對定位的區別
2016-07-12
CSS
定位
2018-11-29
元素的固定定位
2017-04-28
RoR的正確定位
2007-04-26
劫持GPS定位&劫持WIFI定位
2020-08-19
WiFi
導航定位向高精定位的演進與實踐
2020-03-09
【Web前端基礎知識】CSS的定位機制之定位
2020-05-16
Web前端CSS
JavaScript 滾動條定位指定位置
2020-04-05
JavaScript
LSM的儲存和定位
2019-05-16
css中背景定位的方法
2021-09-11
CSS
Cypress 基礎 - 元素的定位
2021-12-13
selenium中的xpath定位
2018-04-09
【CSS】【11】CSS盒子的定位
2017-11-10
CSS
Android的GPS定位
2014-04-08
Android
關於鎖的快速定位
2008-05-23
三個市場的定位
2011-12-20
CSS定位
2018-09-28
CSS
元素定位
2020-12-30
CSS——定位
2020-10-08
CSS
Position定位
2018-07-03
iOS 定位
2017-12-26
iOS
TBM定位
2012-12-26
css的佈局的定位（瞭解）
2017-07-22
CSS
業務測開的尷尬定位
2020-12-14
淺談CSS中的Position(定位)
2020-11-06
CSS
CSS background position 背景定位的用法
2018-01-24
CSS
JVM（三）——物件的訪問定位
2017-04-06
JVM物件
定位SQL的執行次數
2012-04-23
SQL
聊聊產品的重新定位
2024-04-12
辛星和你徹底搞清CSS中的相對定位和絕對定位
2017-08-02
CSS
Python全棧Web（定位佈局、定位方式）
2018-09-06
Python全棧Web

6.css的定位

相關文章