Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

"Position: Absolute;" not acting normal or is it??

Ok so I'm working on an example website and from what I've been taught when an element is positioned absolute it's position is relative to a parent element with a position property ie relative. Anyways check out my code I'm trying to achieve a stacking effect by postioning the left div over the right div and the left div's position keeps referring to the html document itself. What am I doing wrong??

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Crusades</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Kavivanar|Raleway" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/contact.css">
</head>
<body>
<header>
   <h1>Crusades</h1>
      <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="active"><a href="contact.html">Contact</a></li>
            <li><a href="index.html">Information</a></li>
        </ul>
      </nav>
</header>    
  <div class="mountainBackground">
    <div class="photoTitle">
      <h1>Soul Saving Crusades</h1>
      <h3>Coming in 2018</h3>
    </div>
  </div> 
 <div class="main-content">
     <div id="rightDiv">
       <div id="form">
           <h1>Get in touch</h1>
           <h5>Feel free to leave a message!</h5>
           <form>
            <input type="text" placeholder="Full Name">
            <input type="email" placeholder="Email">
            <input type="text" placeholder="Type message here...">
            <input type="button" value="Submit">
           </form>
       </div> <!--Form-Div End-->
     </div> <!--Right-Div End-->
     <div id="leftDiv">

     </div>
 </div> <!--Main-Content Div End-->   









  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>  
 </body>
</html>

And the CSS

/*-- Main Styles --*/

.main-content {
    width: 80%;
    margin: auto;
}


/*-- Right-Div Styles --*/


#rightDiv {
    background-color: white;
    height: 500px;
    position: relative;
}

#form {
    display: flex;
    flex-direction: column;
    width: 50%;
    float: right;
    align-items: flex-start;
    margin-top: 50px;
}

form {
    display: flex;
    flex-direction: column;
    width: 80%;
}

input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background: #eee;
}

input[type="button"] {
    width: 50%;
}

/*-- Left-Div Styles --*/


#leftDiv {
    height: 400px;
    width: 300px;
    background-color: darkblue;
    z-index: 2000;
    position: absolute;
    top: 0;
}

Thanks in advance!!

1 Answer

Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 33,900 Points

"from what I've been taught when an element is positioned absolute it's position is relative to a parent element with a position property ie relative."

Yes, but the parent element (main-content) is NOT set to relative. You have positioned the adcacent sibling #rightDiv to relative, not the parent...