How to get images and other elements to stay in place

position css
z-index
css position image
css overlap elements
css stack elements on top of each other
image position html
html elements overlapping
how to overlap images in html

I am currently working on a webpage that requires me to have a total of 4 images on the page; the first two side by side and the same for the second but underneath the first two. My issue is that when I resize my web browser, everything else stays in place, but the images begin to overlap each other the more I resize the page. I have tried wrapping everything in a container, position absolute, fixed, width:100%, you name it... I still can't seem to get everything to look the exact same, but smaller on a resize.. When I go onto professional websites, all of the page's contents stay intact. Please someone help me out, I've literally been working on this all day.

body {
  padding: 0px;
  margin: 0px;
}
#dLand {
  position: absolute;
  top: 300px;
  left: 95px;
}
#sunset {
  position: absolute;
  top: 300px;
  right: 95px;
}
#griff {
  position: absolute;
  top: 750px;
  left: 100px;
}
#samo {
  position: absolute;
  top: 750px;
  right: 100px;
}
<div class='container'> 
  <div id='main_menu'>
    <div class='logo_area'>
      <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
    </div>
    <div class='inner_main_menu'>
      <ul>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Pricing</a></li>
      </ul>
    </div>
  </div> 

  <img id='dLand'  src='img/calidisney.jpeg' alt='Disneyland, CA'       style='width: 40%'>
  <img id='sunset' src='img/sunset.jpg'      alt='Sunset Strip'         style='width: 40%'>
  <img id='griff'  src='img/griffith.jpg'    alt='Griffith Observatory' style='width: 40%'>
  <img id='samo'   src='img/samopier.jpg'    alt='Santa Monica Pier'    style='width: 40%'>
</div>

One thing you can do (since you already used percentage values for the image widths) is to also use percentage values for the left and right position parameters of the images, in such a way that widths, left and right add up to 100% (so in this example, left and right are 10% each, the widths 40%: 2 x 40% and 2 x 10% = 100%)

(Still, I would recommend NOT to use absolute positions for a basically easy situation like this: You can use the same parammters except margin-top instead oftopand withoutposition: absolute` and get a very similar but definitely more reliable responsive result)

body {
    padding: 0px;
    margin: 0px;
}

#dLand {
    position: absolute;
    top: 300px;
    left: 10%;
}

#sunset {
    position: absolute;
    top: 300px;
    right: 10%;
}

#griff {
    position: absolute;
    top: 750px;
    left: 10%;
}

#samo {
    position: absolute;
    top: 750px;
    right: 10%;
}
 
    <div class='container'> 
        <div id='main_menu'>
            <div class='logo_area'>
                <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
            </div>

            <div class='inner_main_menu'>
                <ul>
                    <li><a href='#'>About</a></li>
                    <li><a href='#'>Pricing</a></li>
                </ul>
            </div>
        </div> 

        <img id='dLand' src='http://placehold.it/300x450/fa0' alt='Disneyland, CA' style='width: 40%'>
        <img id='sunset' src='http://placehold.it/300x450/0fa' alt='Sunset Strip' style='width: 40%'>
        <img id='griff' src='http://placehold.it/300x450/f0a' alt='Griffith Observatory' style='width: 40%'>
        <img id='samo' src='http://placehold.it/300x450/a0f' alt='Santa Monica Pier' style='width: 40%'>

    </div>

Stacking DIVs on top of each other?, How do you put divs on top of each other? When you turn on “Lock Anchor,” you can then move your image to any position on the same page as the anchor paragraph, and the object will stay in that position. However, if you move the anchor paragraph to another page, the object will also move to that page, but stay in the same relative position on the page.


I recommend you use a css-grid structure, just keep in mind that for this to work, the container needs to be of fixed width.

CodePen

HTML

<div class="container">
  <img src="path/to/img">
  <img src="path/to/img">
  <img src="path/to/img">
  <img src="path/to/img">
</div>

CSS

.container{
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

How do I position one image on top of another - CSS, of 2, and so on. The higher the z-index is, the higher the element is positioned on the z-axis. Using Positioning. The information in this tutorial can be used to position text, images, and other content on a web page. The examples were of an image. A div tag can be used (instead of an img tag) to position other content. The positioning can be exact or relative to something else.


You're better off achieving this in a way that doesn't remove the images from the natural flow of the page. Grid is a good way to go:

body {
  padding: 0px;
  margin: 0px;
}

#main_menu {
  display: flex;
  margin-bottom: 20px;
}

.inner_main_menu>ul {
  list-style-type: none;
  display: flex;
  padding: 0 0 0 10px;
}

.inner_main_menu>ul>li {
  margin-right: 20px;
}

.images{
   background: lightblue;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 40px;
}

.images > img{
   width: 100%;
   margin-bottom: 40px;
}

.images > img:nth-last-child(-n+2){
   margin-bottom: 0;
}
<div class='container'>
  <div id='main_menu'>
    <div class='logo_area'>
      <a href='#'><img src='http://placekitten.com/50/50' alt='CA state bear'></a>
    </div>
    <div class='inner_main_menu'>
      <ul>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Pricing</a></li>
      </ul>
    </div>
  </div>
  <div class="images">
    <img id='dLand' src='http://placekitten.com/1000/1000' alt='Disneyland, CA'>
    <img id='sunset' src='http://placekitten.com/1200/1200' alt='Sunset Strip'>
    <img id='griff' src='http://placekitten.com/900/900' alt='Griffith Observatory'>
    <img id='samo' src='http://placekitten.com/1100/1100' alt='Santa Monica Pier'>
  </div>
</div>

How to Take Good Pictures: A Photo Guide by Kodak, How do I stack images on top of each other CSS? Much like we did with the <header> element, we’ll float our copyright to the left within the <small> element and let all other elements wrap around it to the right. Unlike the <header> element, though, we’re not going to use a class directly on the floated element. This time we’re going to apply a class to the parent of the floated element and use a unique CSS selector to select the element and then float it.


How to Stack Elements in CSS, Move in close enough to eliminate other elements in the picture. Make sure that you stay within the minimum focus range of the camera. If you are still in focus, but too close for the flash, put one or two layers of white tissue over the flash to  A child wrapper element that is set to a width larger than the parent element so that it overflows to allow enough space for the child elements to properly float horizontally on to the same line. Child elements that are floated, and have a fixed-width (which does not exceed the child wrapper's width).


Using Div elements to place an item anywhere on a webpage, Let's go over two different ways to accomplish this, one with the If we put position: relative; on the parent element, anything inside of it with We'll see that they're now contained in that same parent and stay positioned inside it. CSS Sprites is a technique where you use a background-image, a set width  Optionally, you could add media queries to make the images stack on top of each other instead of floating next to each other, on a specific screen width. The following example will stack the images vertically on screens that are 500px wide or less:


The CSS Position Property, Create a div using an absolute location to place it anywhere on an HTML webpage. In this short tutorial we will add an element (image, text) to an HTML page, then the item over any other page element except for some Flash and video content. Copy and paste css code (with open and close tags) if you do not have a  To do so, place the elements inside a containing element, such as a div, and set a minimum height on it. Declare the containing element as a table cell, and set the vertical alignment to "middle." For example, here is the CSS: