position定位及實際應用_ZenDei技術網路在線

position定位及實際應用

-Advertisement-

position: static; 靜態定位 / 常規定位 / 自然定位忽略top/right/bottom/left/z-index的影響，使元素回到自然流中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl ...

position: static; 靜態定位 / 常規定位 / 自然定位

忽略top/right/bottom/left/z-index的影響，使元素回到自然流中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;

            position: relative;
            top:10px;
        }
        .block:first-child{
            border:1px solid;
        }
        .block:nth-child(2){
            position: static;
            border:1px solid red;
        }
        .block:nth-child(3){
            border:1px solid blue;
        }
        .block:nth-child(4){
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
    <div class="block">D</div>
</body>
</html>

設置margin:auto為水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;

            position: static;
            margin:auto;
        }
        .block:first-child{
            border:1px solid;
        }
        .block:nth-child(2){
            border:1px solid red;
        }
        .block:nth-child(3){
            border:1px solid blue;
        }
        .block:nth-child(4){
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
    <div class="block">D</div>
</body>
</html>

position:relative 相對定位

相對於自己在常規流中的位置，進行偏移

原來的空間依然預留

可以使浮動元素髮生偏移，並控制堆疊順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            color:white;

            float:left;
            position: relative;

        }
        .block:first-child{
            background:black;    
            z-index:2;    
        }
        .block:nth-child(2){
            background:red;    
            left:-50px;
            z-index:1;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
</body>
</html>

position:absolute;

參照物是最近定位的祖先元素

如果沒有祖先元素被定位，則預設為body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            border:2px solid;

            position: relative;
        }
        .block:nth-child(2){
            border-color:red;

            position: absolute;
            top:20px;
            left:20px;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
</body>
</html>

實現水平垂直居中定位：

1、給父元素設置：position: relative;

2、給子元素設置：

position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            width:100px;
            height:100px;
            border:2px solid;

            position: relative;
        }
        .child{
            width:40px;
            height:40px;
            border:2px solid;
            border-color:red;

            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

position:fixed;

繼承position:absolute;的所有特征，區別是以視口做參照來定位

position:sticky;

與top偏移量結合使用

如果最近祖先元素有定位，則參考最近祖先元素；否則參考視口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:0;
        }
        .container{
            width:1200px;
            height:1000px;
            background:pink;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="nav">導航呀</div>
    <div class="container">內容。。。</div>
</body>
</html>

相對於最近定位的祖先元素做參考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:20px;
        }
        .container{
            width:1200px;
            height:200px;
            background:pink;
            margin:0 auto;
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;

        }
        p{
            height:1000px;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="container">
        <div class="nav">導航呀</div>
        <p>內容。。。</p>
    </div>
</body>
</html>

導航在居中位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:20px;
        }
        .container{
            width:1200px;
            height:200px;
            background:pink;
            margin:0 auto;
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;

        }
        p{
            height:1000px;
        }
        p:first-child{
            height:50px;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="container">
        <p>內容。。。</p>
        <div class="nav">居中導航呀</div>
        <p>內容。。。</p>
    </div>
</body>
</html>

www.caniuse.com 檢測瀏覽器相容性

彈出層的簡單實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content{
            width:100%;
            height:1000px;
            background:url(bg.jpg) top center no-repeat;
        }
        .opacity{
            width:100%;
            height:100%;
            background-color

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

【WPF學習】第十八章多點觸控輸入

多點觸控（multi-touch）是通過觸摸屏幕與應用程式進行交互的一種方式。多點觸控輸入和更傳統的基於筆（pen-based）的輸入的區別是多點觸控識別手勢(gesture)——用戶可移動多根手指以執行常見操作的特殊方式。例如，在觸摸屏上放置兩根手指並同時移動他們，這通常意味著“放大"，而以一根手 ...
ThreadPool(線程池)介紹

" 返回《C 併發編程》" "1. 線程池的由來" "1.1. 線程池出現前" "1.2. 線程池的誕生" "1.3. CLR線程池工作過程" "2. 線程池解決的問題" "2.1. 非同步調用方法" "2.2. 按時間間隔調用方法" "3. 當單個內核對象接收到信號通知時調用方法" "3.1. 註冊 ...
EF--EntityState相互轉換

EF對數據做什麼樣的操作，是根據EF的上下文實體狀態決定，實體狀態有以下5種狀態，下麵我們就分別看下這5種狀態數據準備，我們看到學生表裡有20000名學生記錄，最後1位學生的學生編號為0000020000 1、Detached--實體跟上下文壓根沒關係我們看到我新創建了名學生，學號為000002 ...
「Flink」配置使用Flink調試WebUI

很多時候，我們在IDE中編寫Flink代碼，我們希望能夠查看到Web UI，從而來瞭解Flink程式的運行情況。按照以下步驟操作即可，親測有效。1、添加Maven依賴<dependency> <groupId>org.apache.flink</groupId> <artifactId>flink- ...
「Flink」使用Managed Keyed State實現計數視窗功能

先上代碼：public class WordCountKeyedState { public static void main(String[] args) throws Exception { StreamExecutionEnvironment env = StreamExecutionEnvi ...
「Flink」Flink的狀態管理與容錯

在Flink中的每個函數和運算符都是有狀態的。在處理過程中可以用狀態來存儲數據，這樣可以利用狀態來構建複雜操作。為了讓狀態容錯，Flink需要設置checkpoint狀態。Flink程式是通過checkpoint來保證容錯，通過checkpoint機制，Flink可恢復作業的狀態和計算位置。chec ...
「Flink」使用Java lambda表達式實現Flink WordCount

本篇我們將使用Java語言來實現Flink的單詞統計。代碼開發環境準備導入Flink 1.9 pom依賴<dependencies> <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-java</artifactId ...
Android Gradle報錯 (Error:No such property: GradleVersion for class: JetGradlePlugin) 的原因與解決

Error:No such property: GradleVersion for class: JetGradlePlugin 錯誤原因：IDE 版本（GradlePlugin）和 Gradle 版本不匹配導致這個錯誤。 GradlePlugin 版本和 AndroidStudio 版本一致，與 ...