Question

在我的工作中，我们基于现有的HTML模板为客户定制页面，这意味着我们唯一可以访问的是CSS。显然，这意味着在很多时候寻找问题的创造性解决方案。不确定是否可以这样做，但我需要仅使用CSS将页面上的元素重新定位到原始定位的左侧。基本上，这个元素通常是居中的，但是它们不需要将标题图像居中，而是需要将图像放在屏幕的右上角（我已将其设为背景图像），因此现在对其他元素“居中”向右一点。

我的问题是我只能找到这样做的方法，导致元素在较小的窗口中被切断屏幕的左侧。是否有任何方法，仅使用CSS，将元素放置在其原始位置的左侧，而不允许它从浏览器窗口中掉出来？对不起，如果对此有任何解释，我每天都这样做，但我完全是自学成才。这是我尝试过的（失败的）：

.content {
background: #ffffff;
color: #000000;
margin-top: 0px;
position: relative;
left: -20%;
}

我也尝试过使用margin-left，以及将min-width添加到100％。当我尝试使用position：absolute时，它搞砸了页面上的其他元素，所以这也是不可能的。如果您知道这个问题的解决方案，请告诉我。

Answer 1

你可以用相对位置DIV包围元素，然后你可以使用position：absolute作为元素内容。

<div style="position:relative">
   <div class="content"><img /></div>
</div>

Answer 2

我尝试按照你的解释。如果我理解你的问题，我不是100％肯定，但似乎可以通过对较小的窗口大小应用不同的css来解决你的问题。这是一个例子：

@media only screen and (max-width: 480px) {
    .content {
       // whatever css you want to put here for window sizes smaller than 480px 
    }
}

如何使用CSS重新定位元素，而不会让浏览器将其切断？

2 个答案: