1

so im exercising positioning and i am making a "simple" site but i have a problem with the <h2> on line 25. Its hiding behind the .mission div and is not under it.What am i overseeing?

here is the link to my git repository: https://github.com/itsolidude/Tea_Cozy

here is the plain code: 

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 2;
  background-color: black;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 1200px;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tea-of-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1000px;
  margin: 0 auto;
}

.tea-of-month img {
  height: 200px;
  width: 300px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tea Cozy | Home</title>
    <link rel="stylesheet" href="./resources/css/style.css">
  </head>
  <body>
    <header>
      <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
      <nav>
        <a href="#"><span>Mission</span></a>
        <a href="#"><span>Featured Tea</span></a>
        <a href="#"><span>Locations</span></a>
      </nav>
        </header>
  <!-- main-content,our mission -->
        <div class="mission">
          <div class="mission-banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>
<!-- tea of the month -->
      <h2>Tea of the Month</h2>  <!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
      <h4>What's Steeping at The Tea Cozy?</h4>
      <div class="tea-of-month">
        <div class="item">
          <img src="./resources/images/img-berryblitz.jpg" alt="A picture of Fall Berry Blitz Tea">
          <span>Fall Berry Blitz Tea</span>
        </div>
        <div class="item">
          <img src="./resources/images/img-spiced-rum.jpg" alt="A picture of Spiced Rum Tea">
          <span>Spiced Rum Tea</span>
        </div>
        <div class="item">
          <img src="./resources/images/img-donut.jpg" alt="A picture of Seasonal Donuts">
          <span>Seasonal Donuts</span>
        </div>
        <div class="item">
          <img src="./resources/images/img-myrtle-ave.jpg" alt="A picture of Myrtle Ave Tea">
          <span>Myrtle Ave Tea</span>
        </div>
        <div class="item">
          <img src="./resources/images/img-bedford-bizarre.jpg" alt="A picture of Bedford Bizarre Tea">
          <span>Bedford Bizarre Tea</span>
        </div>
      </div>

  </body>
</html>
itsolidude
  • 1,119
  • 3
  • 11
  • 22

3 Answers3

0

You'll need to add Z-index to your css, everything is normally z-index 1 so if you want something in the foreground just give it z-index 2 or 3

Ramon de Vries
  • 1,312
  • 7
  • 20
  • yes i know, but i dont want the h2 just on top of the stack i want it UNDER the div – itsolidude Mar 29 '18 at 20:50
  • your h2 is not inside a div, if you put it inside a div and have a wrapper around all divs you could place all the divs under each other or even with a responsive wrapper you could give the div a position absolute – Ramon de Vries Mar 29 '18 at 21:02
0

You need to remove 'position:relative' in the mission class.

code-orange
  • 129
  • 6
  • that works But then the .mission div moves up and i need the `position: relative;` to position it under the header. – itsolidude Mar 29 '18 at 20:58
  • Then, you'll need to add 'position: relative' to every element you want under the .mission element. So, you'll need add a position relative to the h2 tag as well. You may then need to add a top: 40px or so. (as you have added a 'top' css to the mission as well) – code-orange Mar 29 '18 at 21:09
0

Note that:

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements.

-- Relative Positioning @ MDN; Emphasis mine.

So, the top:20px on .mission offsets it without affecting other elements, causing them to overlap.

I'm not sure of the purpose of top:20px on .mission but, if it's necessary, you might consider using margin instead of top. If it's not necessary, you could remove top altogether.

Using margin pushes the <header down. This is the result of collapsing margins. There are various methods to uncollapse the margins, each with its own pros and cons. In the example below, I used a ::before pseudo-element on <body>.

Also see Collapsing Margins @ w3.org.

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  text-align: center;
}

/* UNCOLLAPSE MARGIN */
body::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 2;
  background-color: black;
}

img {
  height: 50px;
  padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}


.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  position: relative;
  margin: 70px auto 0;
  width: 1200px;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tea-of-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1000px;
  margin: 0 auto;
}

.tea-of-month img {
  height: 200px;
  width: 300px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Tea Cozy | Home</title>
  <link rel="stylesheet" href="./resources/css/style.css">
</head>

<body>
  <header>
    <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
    <nav>
      <a href="#"><span>Mission</span></a>
      <a href="#"><span>Featured Tea</span></a>
      <a href="#"><span>Locations</span></a>
    </nav>
  </header>
  <!-- main-content,our mission -->
  <div class="mission">
    <div class="mission-banner">
      <h2>Our Mission</h2>
      <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
  </div>
  <!-- tea of the month -->
  <h2>Tea of the Month</h2>
  <!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
  <h4>What's Steeping at The Tea Cozy?</h4>
  <div class="tea-of-month">
    <div class="item">
      <img src="./resources/images/img-berryblitz.jpg" alt="A picture of Fall Berry Blitz Tea">
      <span>Fall Berry Blitz Tea</span>
    </div>
    <div class="item">
      <img src="./resources/images/img-spiced-rum.jpg" alt="A picture of Spiced Rum Tea">
      <span>Spiced Rum Tea</span>
    </div>
    <div class="item">
      <img src="./resources/images/img-donut.jpg" alt="A picture of Seasonal Donuts">
      <span>Seasonal Donuts</span>
    </div>
    <div class="item">
      <img src="./resources/images/img-myrtle-ave.jpg" alt="A picture of Myrtle Ave Tea">
      <span>Myrtle Ave Tea</span>
    </div>
    <div class="item">
      <img src="./resources/images/img-bedford-bizarre.jpg" alt="A picture of Bedford Bizarre Tea">
      <span>Bedford Bizarre Tea</span>
    </div>
  </div>

</body>

</html>
showdev
  • 28,454
  • 37
  • 55
  • 73
  • ty that also works, problem is : using the `margin:` the header gets pushed down – itsolidude Mar 29 '18 at 21:04
  • I see what you mean. That seems to be caused by [collapsing margins](https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element). Please see my edit. – showdev Mar 29 '18 at 21:08
  • ty very much, i read the "collapsing margins" just now but i dont really understand whats happening. and why you set top to 0. could you pls give me a simple explanation? :p – itsolidude Mar 29 '18 at 21:14
  • [This article](http://complexspiral.com/publications/uncollapsing-margins/) might help explain why margins collapse. I was using `top` on `
    ` to ensure it's at the top, since the `.mission` margin collapses with ``. But I've edited my answer to use a different method: a pseudo-element on ``.
     – showdev Mar 29 '18 at 22:58