Question 42725 in Html Question posted in
Some basic documentation can be found here.

bottom div of box is placed to bottom of previous box – Html

I want to create scrollable "list" of divs under each other. I want each div to have 4 rectangles(divs) on eaach side. First div is okay, but top and bottom rectangles of all other divs are placed onto the bottom and top of first div.

here is my HTML and CSS code:

.collection {
  height: 100vh;
  width: 100vw;
}

.leftArrow {
  background: blue;
  position: absolute;
  left: 0px;
  height: 100vh;
  width: 5vw;
}

.rigthArrow {
  background: blueviolet;
  position: absolute;
  height: 100vh;
  right: 0px;
  width: 5vw;
}

.topArrow {
  background: grey;
  position: absolute;
  top: 0px;
  left: 5vw;
  height: 5vh;
  width: 90vw;
}

.bottomArrow {
  background: firebrick;
  position: absolute;
  bottom: 0px;
  left: 5vw;
  height: 5vh;
  width: 90vw;
}

body {
  margin: 0px;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}
<div id="gallery">
  <div class="collection" style="background-color: greenyellow;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
  <div class="collection" style="background-color: antiquewhite;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
  <div class="collection" style="background-color: black;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
</div>

Here is also picture for better understanding. One div is on whole viewport.

enter image description here

I tried to do it but it doesnt work idk what to write here 😀

Tags:

2

Answers


  1. 0

    If you want the coordinates of inner divs to be applied to its parent element, you need to relatively position the parent element by updating .collection class with position set to relative:

    .collection {
  height: 100vh;
  width: 100vw;
  position: relative;
}
    Login or Signup to reply.
  2. 0

    As is, your absolutely positioned divs are all positioned absolute to the body of your HTML. To correct this, you need to set the position of your collections to something other than "static" try this:

    .collection {
  height: 100vh;
  width: 100vw;
  position:relative
}

    Here is more information: https://www.w3schools.com/css/css_positioning.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search