Question

我正在玩一个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;
    }

由于某些原因我不知道为什么这不起作用..违背绝对意味着什么？！

感谢您的帮助！汤姆

Answer 1

您使用的是重置样式表还是其他任何内容？一些较新的重置样式表包括永久设置页面主体上的滚动条的规则。

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

Answer 2

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

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

#card-front {
    right: 150px;
}

Answer 3

而不是右：-150px; ，请使用权利：150px;

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

3 个答案: