0

I know, the title, sorry, but it makes sense. What I'm ultimately trying to achieve is create a container "unrelated" to the body that still respects its size constraints where I can push some messages.

<div id="big-container">
    <div class="wrapper">
        <div id="child">
        </div>
    </div>
</div>

In more detail, I'm trying to push child, which is an absolute div, inside the #big-container which is also absolute. To make my child actually snap to big-container, since they're both absolute, I decided to introduce a wrapper classes that's relative. The styling is as such:

#big-container {
    position: absolute;
    z-index: 3; /* higher over everything else on the site */
}

.wrapper {
    position: relative;
}

#child {
    position: absolute;
}

Now, this works fine and dandy. Except...only on its own. See, thing is, I kinda wanna push these child to the container only so that I don't actually polute other divs/the normal flow. They are, after all, completely detached from the flow. But if I do this, anything that is under #big-container becomes unusable because, well, it's hidden by it. Let's see it in action:

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>

What am I missing here? I feel as if the markup itself is wrong. All I'm trying to do is be considerate of others and simply contain my messages to a single space.

Daniel M
  • 61
  • 1
  • 8
  • I'm not clear on what behavior you want from the stuff outside the container, but does making the container sticky instead of absolute help at all? – Sydney Y Feb 11 '20 at 01:59
  • @SydneyY Can you explain the choice for `sticky`? In my case, both make sense. How does it change the div's behavior? The stuff "outside" is basically the rest of the site. I want this container to be isolated. – Daniel M Feb 11 '20 at 02:00
  • Sticky is in the flow, whereas absolute is out of the flow. Do you want: on page load your container fills the screen, but the user can scroll down to see the content – Sydney Y Feb 11 '20 at 02:03
  • @SydneyY That's correct! Let me read on `sticky` and see what I can cook up. – Daniel M Feb 11 '20 at 02:11
  • @SydneyY Doesn't solve my issue, my problem is that even if the container is `sticky`, I sitll can't get access to the things behind. – Daniel M Feb 11 '20 at 02:20
  • @DanielM - you probably need to tickle the `div`settings a bit. In the css. – wahwahwah Feb 11 '20 at 02:26
  • 1
    @wahwahwah Well, sure, but that's why I'm here...how? – Daniel M Feb 11 '20 at 02:26
  • @DanielM is [it the same in all browsers](https://stackoverflow.com/questions/38361469/remove-browser-default-styling-doctype)? This might be a 'sticky' design-constraint issue... not a programming / css one – wahwahwah Feb 11 '20 at 02:32

3 Answers3

0

Given your desired outcome, I would inject your container into the beginning of the body, use vh and vw to define height and width, and keep your container in the flow.

#big-container {
  margin:0;
  display:block;
  width:100vw;
  height:100vh;
}

let page = document.getElementsByTagName('body')[0]
let container = document.createElement('div')
container.setAttribute('id', 'big-container')
page.insertAdjacentElement('afterbegin', container)
Sydney Y
  • 2,912
  • 3
  • 9
  • 15
0

I solved it. Is it supposed to work this way?

body {
  width: 960px;
  height: 100%;
}

#page {
  position: relative;
  z-index: 1;
}

#big-container {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
  z-index: 2;
}
<body>
  <div id="page">
    <h3> This is some content from the site!</h3>
    <p>...and some more!</p>
  </div>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, it actually works.
      </div>
    </div>
  </div>
</body>

#page has a z-index of 1. It's the most basic, lowest and most rudimentary value. There is no z-index for #big-container so that we don't force #child to any z-index, then we go ahead and set a higher z-index than #page for it.

I'm not sure if this is the best, but it works.

Daniel M
  • 61
  • 1
  • 8
0

All I changed is CSS of your big-container. And the bottom text is selectable now.

The problem is:

Your big-container layer element is too large that covers the whole page, so your click only lies on this element

What you need is:

only to create a higher level layer that display you push message

a) so you don't need an actual fully tiled element, but just a layer, so you don't need width and height 100%.

b) your wrapper requires a width of 100%, which means from the parent, so keep your parent 100% of width.

c) your message should be displayed, so just allow any overflow on your big-container

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 0;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  overflow: display;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>
DeadlYBlinder
  • 116
  • 8