Position Absolute and Bottom 0

You need to add position: relative; to the parent container, which in this case is .wrapper.

Here's a good reference page on absolute positioning.

Why position: absolute; and bottom: 0; not being at body's bottom?

From MDN's documentation on absolute positioning:

The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block), which the containing block of the document's root element.

This describes that it's not the body that it is positioned to, but the initial containing block, which has the dimensions of the viewport, not the body.

By adding position: relative; to body, the element will be aligned to the bottom.

More info on the Initial Containing Block can be found at the W3 specification

Why is my position:absolute, bottom:0 css style place the div somewhere at the top?

You need to add following css

p {
   margin-bottom: 0;
}

body {
  position: relative;
}

As box1 is absolute positioned, you need relative parent from which you need to position the element which is your body

Now what happens in your case,

you have given 100vh to header and box1 div don't have any relative parent so it is positioned relative to screen/document

css `position: absolute; bottom: 0` moving div to bottom of screen instead of bottom of parent

You need position: relative on the header. Without that it won't be like it's a child element. Without relative it'll behave like it's just in the body and not within a parent element:

* {

    font-family: Arial, sans-serif;

    border: 0 solid black;

    box-sizing: border-box;

}

body {

    margin: 0;

    padding: 0;

    height: 500px; /*for testing*/

    background-color: #00FF00;

}

#header {

    height: 270px;

    border: 1px solid #FF0000;

    position: relative;

}

#menu {

    display: block;

    height: 50px;

    padding: 16px;

    font-size: 18px;

    position: absolute;

    bottom: 0;

    border: 1px solid #0000FF;

}

<!DOCTYPE html>

<html lang="nl">

<head>

</head>

<body>

    <div id="header">

        <div id="menu">

            <a href="/" id="home">Home</a>

            <a href="/evenementen.php" id="evenementen">Evenementen</a>

            <a href="/fotos.php" id="fotos">Foto's</a>

            <a href="/contact.php" id="contact">Contact</a>

            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>

            <a href="/partners.php" id="partners">Partners</a>

        </div>

    </div>

</body>

</html>

Position: absolute; Bottom: 0; Right: 0; element moving when parent div becomes scrollable using overflow:auto;

your problem arises because "position: absolute" sets your elements with respect to the closest parent that is positioned (different than static), you want to give the chevron a position relative to the card, but it is inside the ".back" and that is also positioned as absolute.

Solution 1: do the overlapping using "display:grid" on the parent and forcing the position of the childs with "grid-row:1;grid-column:1;" (on both of them) so that the chevron will relate to the card.

Solution 2: take the chevron out of the ".back" so that it relates to ".card" instead of ".back"

Even tho I think solution 1 is better, solution 2 is closer to your answer. so I did some medifications to your code, maybe is useful, here you go:

<style>
*{box-sizing:border-box;}
.card {
  height: 300px;
  transition: transform 2s;
  transform-style: preserve-3d;
  cursor: pointer;
  width: 100%;
  height: 300px;
  border: 2px solid black;
}
.card.flipped .front{
  transform:rotateY(180deg);
}
.card.flipped .back{
  transform:rotateY(0deg);
}

.front, .back {
  position: absolute;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  transform:rotateY(0deg);
  transition:.5s;
  height: 100%;
  padding:15px;
}

.back {
  transform: rotateY(180deg);
  overflow:auto
}

.cards-flip-chevron {
  font-size:40px;
  color:#008081;
  position:absolute;
  bottom:0;
  right:0;
  margin:15px;
}
</style>

<div class="card" onclick="flip(event)">
  <div class="front">
    <p><strong>Example Title</strong></p>
    <p>Example Text</p>
  </div>
  <div class="back">
    <p>
      This is the part where when the text is too long and the box becomes scrollable, the double chevron moves with the scrollbar.
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <p class="cards-flip-chevron">»</p>
</div>
<script>
function flip(event){
  var element = event.currentTarget;
  element.classList.toggle('flipped');
};
</script>

Position: bottom' not working on relatively positioned button element

Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.

If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.

essentially you want:

.wrapper {
  position: relative;
}

.wrapper:nth-child(4){
  position: absolute;
  bottom: 0;
}

Can't position React Native View at the bottom

You can do it without position absolute . Add "flex:1" to view before "LogoutSettings" so it will have full height and "LogoutSettings" will be shown at bottom

Try this in parent

<Fragment>
    <View style={{flex:1}}>
      <ProfileSettings profile={this.state.profile} />
      <MainSettings data={this.state} />
    </View>
    <LogoutSettings />
  </Fragment>

Remove position absolute

<TouchableHighlight onPress={() => this.logout()}>
    <View >
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

Position Absolute and Bottom 0