99国产欧美久久久精品蜜臀|精品无码久久久久久久久久|亚洲国产日韩欧美一区综合|国产亚洲欧洲综合5388

<track id="jjz3x"></track>

            <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
            <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>
          1. 咨詢電話:
            15628812133
            05
            2023/11

            css整體移動div

            發布時間:2023-11-05 12:10:25
            發布者:·
            瀏覽量:
            0

            css整體移動div

            設計出具了這樣的一個需求,一眼丁真-鑒定為移動div,首先寫成如下這種情況。

            css整體移動div

            接下來給大家介紹一下移動div的常用方法

            1.transformtranslateY()

            作為css中唯一一個控制元素位置的元素,當然首先介紹一下他。translate()方法,根據左(X)和頂部(Y)位置給定的參數,從當前元素位置移動。在括號內部輸入移動的像素值或者百分比就能把元素向選定方向移動,這樣的移動方法是保留元素在原位置的空間的,也就是說,底部會發生這種情況。

             css整體移動div

            因為元素移動前的空間并沒有被占據,所以如果后續元素沒有脫離文檔流或者沒有移動相同的距離,那么會顯露出背景的大片空白。

            2.positionrelative

            相對定位,我們直接使用相對定位,設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所占的空間仍保留。

            這個情況和transformtranslate()一樣,原本的空間將被保留,底部的元素也將顯露出大量空白。

            3.margin外邊距

            外邊距也可以用來移動元素,準確來說并不是移動,而是依靠外邊距把原本的元素給撐開,于是我們可以用逆向思維,當我們設置外邊距為負時,元素的外邊距因為是負值就會發生坍縮,內部的元素就會超坍縮的方向移動。

             css整體移動div

            當我們使用margin移動時,會發生這樣的情況,我們可以使用相對定位和z-index使其優先級大于頭部背景,就可以正常顯示了。

             css整體移動div

            相對于其他兩種情況,這個margin法的優勢在于元素不占據原來的位置,其他元素能夠跟在該元素后正常顯示。


            關鍵詞:
            返回列表

            <track id="jjz3x"></track>

                      <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
                      <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>