即使使用绝对定位的 div，也会出现浏览器水平滚动答案

【问题标题】：Browser Horizontal Scroll appearing even if absolutely positioned divs are used即使使用绝对定位的 div，也会出现浏览器水平滚动
【发布时间】：2012-07-13 23:22:21
【问题描述】：

为了找点乐子，我在一个 html5 网站上闲逛。我有一个相对定位的内容包装 div。在里面我有一些元素都是绝对定位的。出于某种原因，在将我的绝对元素放在最右边时，我得到了一个滚动条。只是想知道是否有人能找出原因！？

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>moo</title>
</head>
<body>
<div id="content-wrap">
          <div id="card-front" class="absolute">
              <img src="/images/business-card-front.png" width="211" height="271" alt="Contact Business Person">
          </div>      
  </div>
</body>
</html>

元素的样式是：

#content-wrap {
    width: 960px;
    min-height: 1300px;
    margin: 0 auto;
    position: relative;
    background: transparent url(/images/site-bg.png) no-repeat 0 24px;
}

#card-front {
        position: absolute;
        z-index: 2;
        width: 211px;
        height: 271px;
        top: 225px;
        right: -150px;
    }

出于某种原因，我不知道为什么这不起作用..违背了绝对的意思？！

感谢您的帮助！汤姆

【问题讨论】：

标签： css html css-position absolute

【解决方案1】：

您是否正在使用任何重置样式表或其他任何东西？一些较新的重置样式表包含一个在页面主体上永久设置滚动条的规则。

当您有很多元素可以打开我们的关闭时，这很有用，因为它可以防止页面在滚动条出现时跳转，并在元素显示/隐藏时消失

【讨论】：

【解决方案2】：

在绝对定位元素中将right 属性设置为负值将始终导致元素完全或部分在容器之外，因此滚动条。

如果希望元素距离容器右边框150px，则需要设置为正值：

#card-front {
    right: 150px;
}

【讨论】：

【解决方案3】：

而不是右：-150px； ,请使用right:150px;

【讨论】：

这些值不相等！如果你想要一些东西，把它放在 right:150px 会有完全不同的效果。