css Question posted in
Some basic documentation can be found here.

Css – How to freely position div element without disrupting layout below?

I’m trying to have a div partially overlay a much larger div, but I’m having trouble finding the correct way to position it. I’d ideally like it stuck to a specific point on the edge of the larder div. I’ve gotten it upwards using negative margin (although that feels wrong), but can’t get it off the edge of the screen to move it beyond that.

body {
  background-image: linear-gradient(70deg, #f5fbff, #e5f3fd);
  font-family: "Nunito", sans-serif;
}

.border {
  width: 60%;
  min-width: 500px;
  height: 60vh;
  min-height: 24em;
  border-radius: 30px;
  border: 2px dashed black;
  padding: 8px;
  margin: 7vh auto 0 auto;
}

.window {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 6px 6px 10px #909396;
}

.mini-window {
  margin: -250px 0 0 0;
  margin-left: auto;
  background-color: white;
  overflow: hidden;
  width: 20vw;
  height: 20vw;
  min-width: 150px;
  min-height: 150px;
  max-width: 225px;
  max-height: 225px;
  border-radius: 15px;
  box-shadow: 6px 6px 10px #909396;
}

.actions {
  width: 100%;
  background-color: lightgrey;
  margin-top: 0;
  padding: 4px 0 0 5px;
  display: inline-block;
}

.content {
  width: 100%;
  height: 100%;
  text-align: center;
}

.innertext {
  padding: 40px 20px 0;
}

.dot {
  border-radius: 50%;
  height: 2.88vh;
  width: 2.88vh;
  min-height: 20px;
  min-width: 20px;
  margin: 0 5px;
  display: inline-block;
  box-shadow: 3px 3px 2px grey;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.cshslogo {
  width: 80%;
}

h1 {
  font-size: 40px;
}
<div class="border">
  <div class="window">
    <div class="actions">
      <div class="dot red"></div>
      <div class="dot yellow"></div>
      <div class="dot green"></div>
    </div>
    <div class="content innertext">
      <h1>School's<br>Computer Science<br>Honor Society</h1>
    </div>
  </div>
</div>

<div class="mini-window">
  <div class="actions">
    <p></p>
  </div>
  <div class="content">
    <img class="cshslogo" src="https://csteachers.org/wp-content/uploads/2023/02/CSHS_Logo_square_letters.png">
  </div>
</div>
Tags:

2

Answers


  1. 0

    The answer is to use absolute positioning.

    To implement this, make the following changes:

    1. Make .mini-window a child of .border, rather than a sibling.
    2. Style .border with position: relative.
    3. Style .mini-window with position: absolute and then whatever combination of top, bottom, left and right you need to attach it to your desired position within .border.
    body {
  background-image: linear-gradient(70deg, #f5fbff, #e5f3fd);
  font-family: "Nunito", sans-serif;
}

.border {
  width: 60%;
  min-width: 500px;
  height: 60vh;
  min-height: 24em;
  border-radius: 30px;
  border: 2px dashed black;
  padding: 8px;
  margin: 7vh auto 0 auto;
  position: relative;
}

.window {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 6px 6px 10px #909396;
}

.mini-window {
  background-color: white;
  overflow: hidden;
  width: 20vw;
  height: 20vw;
  min-width: 150px;
  min-height: 150px;
  max-width: 225px;
  max-height: 225px;
  border-radius: 15px;
  box-shadow: 6px 6px 10px #909396;
  position: absolute;
  top: 3em;
  right: 0;
}

.actions {
  width: 100%;
  background-color: lightgrey;
  margin-top: 0;
  padding: 4px 0 0 5px;
  display: inline-block;
}

.content {
  width: 100%;
  height: 100%;
  text-align: center;
}

.innertext {
  padding: 40px 20px 0;
}

.dot {
  border-radius: 50%;
  height: 2.88vh;
  width: 2.88vh;
  min-height: 20px;
  min-width: 20px;
  margin: 0 5px;
  display: inline-block;
  box-shadow: 3px 3px 2px grey;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.cshslogo {
  width: 80%;
}

h1 {
  font-size: 40px;
}
    <div class="border">
  <div class="window">
    <div class="actions">
      <div class="dot red"></div>
      <div class="dot yellow"></div>
      <div class="dot green"></div>
    </div>
    <div class="content innertext">
      <h1>School's<br>Computer Science<br>Honor Society</h1>
    </div>
  </div>
  
  <div class="mini-window">
    <div class="actions">
      <p></p>
    </div>
    <div class="content">
      <img class="cshslogo" src="https://csteachers.org/wp-content/uploads/2023/02/CSHS_Logo_square_letters.png">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Assuming .window is the larger div and .mini-window is the overlay, you would make the overlay a child of the large div in your .html file:

    <div class="border">
 <div class="window">
   ...    
   <div class="mini-window"> # Make .mini-window a child of .window
     <div class="actions">
       <p></p>
     </div>
     <div class="content">
       <img class="cshslogo" src="https://csteachers.org/wp- 
        content/uploads/2023/02/CSHS_Logo_square_letters.png">
     </div>
   </div>
 </div>  
</div>

    Once .mini-window is a child of .window, it’s absolute positioning will be relative to it’s parent if you set the proper position values. Now you can style them as follows in your .css file:

    .window {
position: relative;
}
.mini-window {
position: absolute;
}
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search