CSS：可以做位置：固定偏移中心div吗？

发布于 2024-10-24 11:11:14 字数 684 浏览 4 评论 0原文

首先，看看我想要实现的布局示例（如下）

在此处输入图像描述

基本上，我有一个标准的中心 div（灰色），具有典型的 margin: 0 auto。我的问题是我有一个背景图像（在白色溢出区域），它是

，具有以下 CSS

background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;

此背景应用在 HTML< /code> 文档级别到 #stripes div。

我遇到的问题是设置下面的红色 div。计划是让它通过 position:fixed 始终保持可见，但是，我不能使用基于 % 的 right: xx%; top: 0 因为图案必须与条纹图案对齐，所以几个像素的偏移会在页面上创建可见且明显的“接缝”。

下面是包含条纹的效果：

在此处输入图像描述

原文

First of all, have a look at this example of the layout I'm trying to achieve (below)

enter image description here

Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS

background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;

This background is applied BELOW the HTML level of the document to the #stripes div.

What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.

Here is a look at the effect with the stripes included:

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千寻… 2024-10-31 11:11:14

我最终解决这个问题的方法是创建两个 div。在顶层，我使用了标准 width: 960px; margin: 0 auto div 然后在文档的末尾我创建了另一个具有相同样式的 div 来充当照片的容器（上面的红色 div）。在第二个 div 内部，我嵌套了一个

div。该 div 使用以下样式：

#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}

父 div 称为 #stripes

#stripes {
    background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
    height: 9999px;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:

#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}

the parent div was called #stripes

#stripes {
    background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
    height: 9999px;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

回复收藏 0 原文

~没有更多了~