代码之家 › 专栏 › 技术社区 › Burt

CSS定位拼图

xhtml css html

Burt · 技术社区 · 15 年前

下面的图片表示我正在尝试创建的网站布局。蓝色部分(右下角)表示图像应该位于三个相邻元素的后面,并稍微溢出它们。

我不知道最好的方法来做这件事,目前我有一个包装分区周围的彩色部分,并把背景图像在那里,但我不确定这是否是最好的方法,因为包装分区需要有一个固定的大小。

任何建议都非常欢迎。

http://www.gumpshen.com/images/layout.png

5 回复 | 直到 15 年前

luckykind 15 年前

这应该是你需要的…

您的CSS应该如下所示:

    <!-- add CSS Reset before this -->

#header {
    background-color:#888;
    height:100px;
}

#content {
    position:relative;
    float:left;
}

#topleft {
    position:relative;
    float:left;
    width:50%;
    background-color:yellow;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#topright {
    position:relative;
    float:left;
    width:50%;
    background-color:red;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomleft {
    position:relative;
    float:left;
    width:50%;
    background-color:green;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomright {
    position:absolute;
    left:49%;
    bottom:0;
    width:50%;
    padding:20px 0 0 17px;
    background-color:blue;
    z-index:2;
    min-height:100px;               
}

您的HTML应该如下所示:

<div id="header">
    <h1>Header</h1>
</div>
<div id="content">
    <div id="topleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="topright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

注: “lorem ipsum”,不透明度和最小高度仅用于显示:)

Vian Esterhuizen 15 年前

如果我正确理解你,这是我的答案:

如果灰色是一个标题,就按你的意愿来对待它。

然后有一个“content”DIV,该DIV包含黄色、红色、绿色和蓝色,应该是 相当地 定位。从那里你可以 绝对地 定位蓝色,使其与黄色、红色和绿色重叠。然后使用一些z索引,您应该得到您需要的。

Keith Williams 15 年前

它是固定宽度的吗?如果是这样,你可以对背景图像做一些欺骗。如果是用和固定高度,然后更好-只需将整个图像保存为背景。

您还可以为图像提供背景图像,如下所示:

#MyImage {
  padding: 20px 0 0 20px;
  background: url(images/image-background.jpg) top left no-repeat;
}

然后图像将位于中间,背景显示在边缘周围。然后你的图像可以是200x100px,背景图像是220x120px。

jeroen 15 年前

我假设你已经把色块计算出来了。

现在,您可以将原始图像作为背景放在蓝色框中,放在右下角,并将该图像的半透明版本(或使用CSS透明)绝对放在包装器的右下角。原版原版原版原版原版上的半透明图像将在周围的盒子中显示。

arturopuente 15 年前

使用相对定位来定位元素,不要忘记将正确的z索引值设置为要放在顶部的DIV。