Css Absolute Position With X Scrolling

CSS absolute position with x scrolling

Well this is pretty impossible.

When you assign 100% width to the children,that means the parents width not the document.

beside what making the parent overflow is<div class="inner"> with 1000xp width where the stripes are assigned to <div class="bg"> which has 100% width which equals to the parent's width.

So instead Apply the strippes to the .outer and when the children overflow, it'll maintain the background.

.outer {  width: 300px;  height: 200px;  overflow-x: scroll;  overflow-y: hidden;  border: 1px solid black;  position: relative;  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);  background-size: 100% 0.7em;}
.inner {  width: 1000px;  height: 200px;}
.bg {
  position: absolute;  width: 100%;  height: 100%;  top: 0;}

<div class="outer">  <div class="bg"></div>  <div class="inner"></div></div>

Position absolute inside an overflow-x scroll

Wrapping with a scrollable div instead of making the container scrollable will solve your problem. Example with your code :

  <div class="wrap">
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
  <div/>

CSS:

.container {
  width: 100vw;
  background-color: red;
  position: relative;
  white-space: nowrap;
}
.wrap {
  overflow: auto;
}

CSS - Position absolute overflow parent while being able to scroll

I slightly edited your code snippet and added a class to the black container, to easily style its direct children with this:

.container > div {
  border: 1px solid green;
}

.container > div {
  border: 1px solid green;
}

<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px; position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>
    </div>

Off screen absolute positioned Div causing horizontal scrolling

I have the same issue in my Safari(Version 12.1.1) when I set my div to position: absolute and right: -15rem;

To fix it, I added a to include all elements within and have the CSS like this:

.wrapper {
  position: relative;
  overflow-x: hidden;
}

Hope this help.

CSS Absolute Positioning within scrollable table

Add this css code..

css

  .tableDropMenuCell {
    position: relative;
  }
  .tableDropMenuContainerContent {
    z-index: 9;
  }

Position absolute inside a scrolling overflow container

I altered .msg-is-typing-container's CSS to achieve the positioning I believe you want.

.msg-is-typing-container{
    position: relative;
    border: 1px solid red;
    display: inline-block;
    padding: 5px 10px;
}

I then added a matching id as shown to this element: <p class="msg-is-typing" id="msg-is-typing"></p>

The below jQuery & JavaScript hides the typing container .msg-is-typing-container until the .nano-content container is scrolled to the bottom, at which time the container fades into view. I also added a JavaScript typing effect found here at w3Schools. You can see this JSFiddle where I tried to answer the question as I understood it.

$('.msg-is-typing-container').hide();

$(document).ready(function() {
  var i = 0;
  var txt = 'Administrator is typing ...And Only Shows when div is scolled to bottom';
  var speed = 100;                

  function typeWriter() {
    if (i < txt.length ) {
      document.getElementById("msg-is-typing").innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }    


  $(".nano-content").scroll(function(){   
    if ($(this).scrollTop()>0) {
      $('.msg-is-typing-container').fadeIn(2000);

    }
    else{
      $('.msg-is-typing-container').fadeOut(1000);
    }
  })

  typeWriter();
})

How to use CSS absolute position inside a scrollable div element

You must set position: relative; on the parent div to get the child elements to move in relation to it.

The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.

Why does position absolute make page to overflow?

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

Css Absolute Position With X Scrolling