0

我正在尝试在我的网站上放置一张图片，使其看起来像是剪纸到网站内容上，在正文块的外裙中，如下所示：

在此处输入图像描述

我设法使用 position: absolute; 来获得这个定位。css 属性，然后使用顶部/右侧值定位图像。问题是，这仅适用于我的家庭全屏（当然还有其他具有相同分辨率的），并且一旦我缩小窗口，它看起来像这样：

在此处输入图像描述

图像向内移动，因为我的 css 告诉它。有没有人知道我应该使用什么 CSS 属性来将图像定位在同一个位置，无论窗口有多宽？

编辑：这是我使用 George 和 Ed 的输入解决的 CSS：

#picture-container {
            position: relative;
            max-width: 1px;
            max-height: 1px;
        }

        #image {
            position: absolute;
            right: -932px;
            top: -30px;
        }
4

5 回答 5

2

你应该添加

position: relative;

到内容容器，然后将图像绝对定位在其中。然后绝对定位将基于该 div，而不是页面。

于 2013-03-14T15:23:31.000 回答
2

解决方法是添加position: relative到您的容器（创建新的定位上下文），然后相对于该容器定位图像。目前，您正在定位img相对于body.

看看这个小提琴，它显示了声明所产生的差异，下面的截图。

在此处输入图像描述

我真的建议您花 5 分钟时间阅读这篇文章，以确保您能够使用 CSS 来布局和定位事物。

于 2013-03-14T15:35:07.183 回答
0

要将图像定位在主 div 之外，请在右侧使用负值：

 .image{
    position: absolute;
    top: 200px;
    right:-50px;
 }
于 2013-03-14T15:30:08.303 回答
0

就像上面的人提到的那样，它与相对位置有关。但是，为了使其保持静止，您必须制作一个浮动的 div，并且它不是正常内容布局的一部分。

这是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Example</title>
    <style>
        body, html {padding: 0; margin: 0;}
        #wrapper {width: 960px;margin: 0 auto;}
        .floater {height: 100%; width: 100%;position: absolute;}
        .inner-float {position: relative; width: 1020px; margin: 0 auto;text-align: center;}
        .inner-float img {width: 150px; top: -10px; right: 0px;position: absolute;}
        .content {}
    </style>
</head>
<body>
    <div class="floater">
        <div class="inner-float">
            <img src="./clipboard_icon.png" />
        </div>
    </div>
    <div id="wrapper">
        <div class="content">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

</body>
</html>

希望这可以帮助。

-e

于 2013-03-14T15:53:38.833 回答
0

如果您可以使用百分比，那么这是一种使对象真正保持原状的方法。不要省略正文 CSS

<body style="padding:0; margin:0">

<div>

<div style="background-color:red; width:100%; height:300px; position:relative;">

<div style="background-color:green; width:100px; height:100px; position:absolute; margin: 10%;"></div>

</div></div>

</body>
于 2015-05-31T09:30:09.800 回答