简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 如何把一个视图放在左浮动定位的视图的上面？
高洛峰
高洛峰 2017-04-17 14:40:10
0
2
539

我想把一个红色的视图放在左浮动视图的上面，但是看不见了这个红色视图，下面是我的代码，多谢指导。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Heors - How To Convert a PSD Template TO HTML5/CSS3</title>
    <meta charset="utf-8">
    <meta name="author" content="pixelhint.com">
    <meta name="description" content="Heros - Learn How To Convert a PSD Template TO HTML5/CSS3"/>

        <style media="screen">
            .red {
                width: 300px;
                position: absolute;
                text-align: center;
                bottom: 80px;
                z-index: 9999;
                background-color: red;
            }

            .wrapper {
                width: 300px;
                height: auto;
                position: relative;
            }

            .yellow{
                width: 300px;
                float: left;
                    height: 600px;
                    background-color: yellow;
            }
        </style>
</head>
<body>

    <p class="wrapper">
        <p class="yellow">
            左浮动
        </p>
        <p class="red">
            <p>绝对定位距底部80px</p>
        </p>
    </p>

</body>
</html>
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

全員に返信(2)
Ty80
Ty802017-04-17 14:42:10 2棟

楼主，你仔细看看你父元素wrapper的高度为多少？这是为什么呢？因为你yellow左浮动了，脱离文档流，red绝对定位也已经脱离文档流了，所以你red定位在bottom：80px没什么屌用，因为父元素高度都没有，它上哪去找80px的底部来定位。
所以，你要解决的方法就是，动用你勤劳的小手，给父元素wrapper加上overflow:hidden;(溢出隐藏)

いいねを押す +0
返信を追加
小葫芦
小葫芦2017-04-17 14:42:10 1棟 
.red {
                width: 300px;
                position: absolute;
                text-align: center;
                bottom: 80px;
                z-index: 9999;
                background-color: red;
            }
            改成：
            .red {
                width: 300px;
                position: absolute;
                text-align: center;
                top: 0;
                z-index: 9999;
                background-color: red;
            }
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！