Question

我正试图在我的网站上放置一个图像，以便它看起来像纸张被剪裁到网站内容，在正文块的外围，如下所示：

enter image description here

我设法使用这个位置来获得这个定位：绝对; css属性，然后使用顶部/右侧值定位图像。问题是，这只适用于我的家庭全屏（当然其他人使用相同的res），一旦我缩小窗口，它就像这样：

enter image description here

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

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

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

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

Answer 1

你应该添加

position: relative;

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

Answer 2

修复方法是将position: relative添加到容器中（创建新的定位上下文），然后相对于该位置定位图像。目前，您将img相对于body定位。

查看this fiddle，其中显示了声明所做的差异，截图如下。

enter image description here

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

Answer 3

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

 .image{
    position: absolute;
    top: 200px;
    right:-50px;
 }

Answer 4

就像上面提到的人一样，它与位置相关有关。但是，为了使它保持静止，你必须创建一个漂浮的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

Answer 5

如果你可以使用百分比，那么这里是一种使对象真正保持放置的方法。不要省略身体CSS

$("table tr").click(function(){
    $("table tr").removeClass('selectedRow');
    $(this).addClass('selectedRow');
});

定位图像，使其无论窗口宽度如何，始终以相同的方式定位

5 个答案: