隐藏在背景后面的css元素

标签 css

我遇到了一个 div 没有显示的问题。代码很简单,仅供测试:

<html>
<head>
    <title>Main</title>

    <style>
        .simple-div {
            -moz-border-radius: 15px;
            border-radius: 15px;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;">
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">

    </div>

    <div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;">

    </div>

</body>
</html>

如何让第二个 div 保持在背景图片之上?它目前没有显示在屏幕上,但我可以通过 chrome 使用 Inspect 元素看到它在后面突出显示。

问候,

最佳答案

我会使用 position:relative 或 position:absolute,在两个 div 上都使用 z-index。

<div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index: 0; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
</div>

<div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px; position: relative; top: 0; left: 0; z-index: 15; background-color:#ff0000;">
    test
</div>

关于隐藏在背景后面的css元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15372069/

相关文章:

css - 是否仍然如此,使用 table+css 为桌面浏览器制作跨浏览器布局比 div+css 更容易?

javascript - siblings CSS 规则与 React styled-components/CSS modules/CSS-in-JS

javascript - $(窗口).宽度();和 $(window).height();在每个浏览器中出现不同

html - 如何在整个正文中添加自定义文本选择

html - 调整菜单和文本的大小

html - 删除垂直 div 之间的空间

jquery - 可以通过 jQuery animate() 动画的 CSS 属性的完整列表

javascript - 优化不同手机屏幕的游戏菜单

css - 根据高度设置宽度

javascript - 帮助将这段代码从 jQuery 转换为纯 javascript