Question

由于标题设计img .content-panel，我无法让#panel-design和.content浮动在#searchbar-container的右侧。我已经尝试使用z-index使用不同的值。我希望将.content-panel和#panel-design放在.content的右侧，同时让#searchbar-container高于div

<body>
        <div class="header">
            <img id="searchbar-container" src="images/searchbar1.png">
        </div>
        <div class="content">
            <div class="sidebar"></div>
            <div class="content-panel">
                <div id="panel-design"></div>
                   <!--main content here-->
            </div>
        </div>
</body>

css：

    .content {
    position: relative;
    max-width: @width;
    height: 768px;;
    margin: 0 auto;
    padding: 0;
   }
       .content-panel {
        position: absolute;
        float: right;
        margin: 0;
        padding: 0;
        width: 753px;
        height: 100%;
        background-color: blue;
        z-index: -2;
    }
    #panel-design{
        float: right;
        width: 685px;
        height: 375px;
        background-color: red;
        z-index: -1;
    }
    .sidebar{
        width: 285px;
        height: 100%;
        margin: 0;
        padding: 0;
    }

无法发布整件事。但这是我需要实现的，基本上上面的灰色图像是#searchbar-container，而Depp的图片是#panel-design前面的.content-panel。

enter image description here

到目前为止，这就是我的页面：

enter image description here

蓝色div是.content-panel

红色div是#panel-design

上面的灰色img是#searchbar-container

.content没有背景颜色，但其大小超过了#searchbar-container

的曲线

Answer 1

因此，我从您的问题中了解到，您希望#searchbar-container与#panel-design重叠。

这样做的一种方法是使.header div固定，但你可能不希望这样，因为它变得独立于滚动。

我提出的另一种方法是使用absolute位置，您可以看到小提琴here

标题div中的图像不会出现在内容div之前

1 个答案: