CSS, position: absolute, scrollbars

问题

Say there is a page:

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Why the horizontal scrollbar only accounts for the RIGHT overflow?

In other words, why LEFT triggers no scrollbar, while RIGHT does?

Is there a way, other than body -> overflow: hidden, for RIGHT not to trigger the scrollbar?

Edit:

What I try to achieve is a wrapper in the middle of page (like any other "content" pane out there - basically div -> margins: 0 auto;. This should trigger horizontal scrollbar if the screen is too small. Then, and this is the problem, I want another div's to "stick outside" of the wrapper - these should not trigger the scrollbar.

Edit 2:

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

When the screen is wide enough, everything's fine. But as I try to shrink the screen, all of sudden a horizontal scrollbar appears. The problem is, it only allows to scroll to see RIGHT, and not LEFT. Is the a way to for the scrollbar not to appear until the wrapper, and only the wrapper, is larger than the screen?

回答1:

After your clarification, I understand the problem.

You can get around it by adding a wrapper element, and giving that overflow: hidden, and a min-width.

Live Demo

HTML:

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}

回答2:

I had the same problem and ended up solving it using media queries. In my case, i wanted to have a draggable / resizable sidebar positioned partly offscreen (if window width around 1000px) with no horizontal scrollbar.

But if the window width is less than 960 px (the main container width is 960), the horizontal scrollbar should be present so that the user can see it all.

The markup:

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

The CSS

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}

来源：https://stackoverflow.com/questions/5371580/css-position-absolute-scrollbars

标签

html

css

css-position