How do I make elements collide with fixed element?

user_17526944 0
Viewed 169

How do I make a fixed element push other elements to the side when they overlap?

I don't want this: enter image description here

Or this: enter image description here

I want this: enter image description here

I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.

Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?

css-position css html
2 Answers

Is it even possible to push elements away from a fixed element?

I would say no. Not with this concept.

I can think of two solutions that I would not recommend.

  1. Implement it with an iframe. But I would not recommend that.
  2. Using JS to read out the width and assign it to the neighbouring element.

I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.

body {
  height: 200vh;
}
.verti {
  background: red;
  width: 200px;
  height: 500px;
  z-index: 10;
  position: fixed;
  top: 8px; 
}

.hori {
  background: green;
  width: 500px;
  height: 200px;
  z-index: 1;  
  position: relative;
  left: 200px;
}
<div class="w">
  <div class="hori"></div>
  <div class="verti"></div>
</div>

user_148071110

Tried using float? I'm pretty new to all this but this is what I got:

<body>
    <div id="container">
        <div id="fixed">
            <p class="center-text white">Fixed <br>Element</p>
        </div>
        
        <div id="not-fixed">
            <p class="center-text white">Not Fixed Element</p>
        </div>
    </div>

    <style>
        * {
            padding: 0;
            margin: 0;
            font-family:arial;
        }

        .center-text {
            text-align:center;
            position:relative;
            top:45%;
        }

        .white {
            color:white;
        }

        #container {
            margin:10px;
            width:700px;
            height:700px;
        }

        #fixed {
            background-color:red;
            position:fixed;
            width:200px;
            height:500px;
        }

        #not-fixed {
            position:relative;
            background-color:green;
            width:500px;
            height:200px;
            float:right;
        }
    </style>
</body>
user_143851010
Related