定位-相對定位

番茄西紅柿發(fā)布于2019-04-23 13:24 / 2236人閱讀

摘要：定位輸出定位將指定的元素擺放到頁面的任意位置可以通過屬性來設置元素的定位輸入輸出元素沒有移動，為默認值相對定位輸出當開啟了元素的相對定位以后，而不設置偏移量時，元素不會發(fā)生任何變化輸入偏移量，，，，一般選擇水平方向的



  
    
    定位

　　輸出：

定位：將指定的元素擺放到頁面的任意位置

可以通過position屬性來設置元素的定位

輸入static：

  .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: static;
      }

輸出：元素沒有移動，static為默認值

relative：相對定位

.box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
      }

輸出：當開啟了元素的相對定位以后，而不設置偏移量時，元素不會發(fā)生任何變化

輸入偏移量（left，right，top，bottom，一般選擇水平方向的一個偏移量和垂直方向的一個偏移量進行定位就可以）：

      .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
        left: 50px;
        top: 100px;
      }

輸出：1、相對定位 relative 是相對于元素在文檔流中原來的位置進行定位

2、相對定位會使元素上升一個層級

　　　 3、相對定位的元素不會脫離文檔流

插入一個內聯(lián)元素：

      span{
        background-color: rgb(209, 198, 209);
        position: relative;
      }

    span元素

輸出：相對定位不會改變元素的性質，塊元素還是塊元素，內聯(lián)元素還是內聯(lián)元素

GPU云服務器云服務器相對定位-絕對定位相對定位相對定位自適應人臉定位

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/1815.html

構建靜態(tài)頁面之 [ 定位 ]

摘要：定位屬性表示設置定位絕對定位固定定位相對定位絕對定位表示設置絕對定位絕對定位的注意設置絕對定位后，當前元素脫離文檔流如果指定元素的父級元素是元素該元素就是相對于當前頁面的定位如果指定元素的父級元素不是元素，父級元素沒有開啟定位該元素就定位 position屬性表示設置定位絕對定位固定定位相對定位絕對定位 position : absolute - 表示設置絕對定位...

bingchen 2019-08-29 16:31 評論0 收藏0
構建靜態(tài)頁面之 [ 定位 ]

摘要：定位屬性表示設置定位絕對定位固定定位相對定位絕對定位表示設置絕對定位絕對定位的注意設置絕對定位后，當前元素脫離文檔流如果指定元素的父級元素是元素該元素就是相對于當前頁面的定位如果指定元素的父級元素不是元素，父級元素沒有開啟定位該元素就定位 position屬性表示設置定位絕對定位固定定位相對定位絕對定位 position : absolute - 表示設置絕對定位...

ISherry 2019-08-02 16:31 評論0 收藏0
CSS詳細解讀定位

摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。一前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。二正文 1.文檔流布局的概念將窗體自上而下分成一行行，并在每行中按從左至右的...

1treeS 2019-08-30 14:01 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優(yōu)先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優(yōu)先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評論0 收藏0
CSS相對定位和絕對定位

摘要：三絕對定位拼爹型絕對定位不占有位置。父級有定位絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對固定或相對的父元素祖先進行定位。絕對定位的盒子水平垂直居中普通盒子左右居中用即可，但對于絕對定位的就無效了。為什么要學定位定位是CSS中的難點和重點，特別是后面學javascript特效時候，比如實現(xiàn)下拉菜單、彈框等，要蓋住下面內容又不會影響下面內容，比如要超出盒子一部分，比如屏幕中有一個小彈窗飄來...

xinhaip 2019-08-30 15:54 評論0 收藏0