将图像固定在右上角，但设置最小页面宽度

我正在尝试将标注图像粘贴到页面的右上角，但我不希望它在屏幕低于一定宽度后移动，否则它将开始与其他页面元素重叠。有谁知道最好的方法是什么？谢谢！

标准的CSS实践告诉我们，页面上的每个元素都应该封装为一个块：

<div style="float:left;">
    <div style="float:left;">
        <img src="picture.png" />
    </div>
</div>

这种风格允许elels相互堆叠，防止重叠。

在您的情况下，听起来您有一个标题，您需要在右上角固定一张图片：

<div id="header" style="width:100%;float:left;">
    <div style="float:right;">
        <img src="picture.png" />
    </div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
    Hey, this stuff works!
</div>

但是您还提到您的页面应该具有最小宽度，以便当用户尝试收缩宽度时，元素不会水平重叠：

<body style="min-width:800px;">
    <div id="header" style="width:100%;float:left;">
        <div style="float:right;">
            <img src="picture.png" />
        </div>
    </div>
    <!-- continue stacking elements to build your page -->
    <div id="content" style="width:100%;float:left;">
        Hey, this stuff works!
    </div>
</body>

相关内容

最新更新

热门标签：