CSS position

時間 2019-11-06

標籤 css position 欄目 CSS 简体版

原文原文鏈接

CSS positionhtml

CSS position 屬性用於指定一個元素在文檔中的定位方式。top、right、bottom、left 屬性則決定了該元素的最終位置。ide

切換窗口大小時位置不變。使用positon後標籤會飄起，塊級標籤會變爲行內標籤，可經過增長左右距離拉伸邊距。字體

position: fixedspa

position: fixed 　　固定在頁面的某個位置
top:0px; 　　　　上邊部分
right:0px; 　　　　右邊部分
bottom: 0px; 　　下邊部分
left: 0px; 　　　　左邊部分

position永久固定某個窗口code

<html>
<body>

    <!--  像素長寬爲50像素的框，字體爲白色-->
    <div style="width: 50px;height: 50px;background-color: black;color: white;
    /* position: fixed 固定在頁面的某個位置 */
    position: fixed;
    /* right:10px; 右邊距離10像素 */
    right:10px;
    /* bottom: 10px; 下邊距離10像素 */
    bottom: 10px;
    ;">xxx</div>
    <!--  建立大的背景框-->
    <div style="height: 5000px;background-color: cornflowerblue">123</div>

</body>
</html>

將小窗口固定再右下角，上下滾動小窗口不變

<html>
<head>
    <!--  添加兩個樣式分別交給body引用 -->
    <style>
        .head {
            /* height: 48px;設置像素 */
            height: 48px;
            /*  background-color: cornsilk;設置背景顏色 */
            background-color: cornsilk;
            /* color: #000;設置字體顏色 */
            color: #000;
            /* position: fixed 固定在頁面的某個位置 */
            position: fixed;
            /* top: 0;  上邊距離0像素 */
            top: 0;
            /* right: 0; 右邊距離0像素 */
            right: 0;
            /*  left: 0; 左邊距離0像素 */
            left: 0;
        }

        .body {
            /*  background-color: cornsilk;設置背景顏色 */
            background-color: antiquewhite;
            /* height: 5000px;設置像素 */
            height: 5000px;
            /*  margin-top: 48px;設置上邊邊距距離 */
            margin-top: 48px;
        }
    </style>
</head>
<body>
<div class="head">xxx</div>
<div class="body">xxx</div>
</body>
</html>

將列表固定再最上邊，上下滾動列表不變，最上邊數據不被遮擋

position: relative + position: absolutehtm

position: relative;　　單使用沒有效果，設置後可再子標籤內設置position: absolute;屬性，實現依據父標籤固定定位。
position: absolute;　　實如今父標籤含有position:relative; 屬性時，實現依據父標籤固定定位。

position父標籤內永久固定窗口blog

<html>
<body>
　　<!--  添加邊框並居中，添加position:relative; 屬性-->
　　<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
    　　<!--  添加position: absolute; 屬性，實現依據父標籤固定定位，添加框，固定再指定位置-->
    　　<div style="position: absolute;left: 0;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>
　　</div>
</body>
</html>

效果：ci

position 也能夠經過 relative + absolute 完成三層或多層效果文檔

<html>
<body>

    <!-- 添加三層層樣式 -->
    <div style="
        /* z-index: 10; 設置層級順序爲最大 */
        z-index: 10;
        /* position: fixed; 添加佔用頁面位置 */
        position: fixed;top: 50%;left: 50%;
        /* 根據三層框自定義移動位置 使其在中間 */
        margin-left: -250px;margin-top: -200px;
        /* 設置背景爲白色長寬400，500像素的樣式 */
        background-color: white;height: 400px;width: 500px;
        ;"></div>

    <!-- 添加二層層樣式 -->
    <div style="
        /* z-index: 9; 設置層級順序爲二層 */
        z-index: 9;
        /* position: fixed; 添加佔用頁面位置 */
        position: fixed;
        /* 設置背景顏色，並設置長度0爲所有覆蓋 */
        background: black;top: 0;bottom: 0;right: 0;left: 0;
        /* 設置透明度 */
        opacity: 0.5;
        "></div>

 <!-- style 設置屬性、height:48px 設置背景分辨率、background-color: green(綠) 修改背景顏色、 -->
    <div style="height: 5000px;background-color: green;">
        xxxxxx
    </div>

</body>
</html>

1. CSS——position
2. css position
3. CSS-position
4. css - position
5. CSS Position
6. CSS position
7. css---(position)
8. [CSS]CSS Position 詳解
9. css定位position
10. 前端css position
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 算法總結-二分查找法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。