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

Posted by rymatech
rymatech
4,671 Points

z-line not working? - I am unable to use my scroll box as I believe the profile photo which is partially on it.

z-line not working? - I am unable to use my scroll box as I believe the profile photo which is partially on it. I am trying to create a kind on LinkedIN effect where my round profile photo is half on the cover photo and half on the paragraph box with scroll bar below. Please help? see code below.

rymatech
rymatech
4,671 Points 
          <!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet">

<div id="videodiv" class="fullscreen-bg">
  <head>
      <title>Founders & Coders Application</title>
      <video loop muted autoplay class="fullscreen-bg__video">
      <source src="coding-background.mp4" type="video/MP4"> </video>
  </head>
</div>

<body>
  <div id="div1">
    <section>
      <ul>
        <img id="logo" src="images/ryma-logo.jpg" alt="RYMA Logo">
        <li><a  href="#Contact">Contact</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#about">About</a></li>
        <li><a class="active" href="#home">Home</a></li>
      </ul>
      <header class"header" >RYMA Technology</header>
      <h1 class="mainwording">Inspired by Founders & Coders</h1>
    </section>
  </div>

<div id="div2">
  <section>
    <h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>
  <div class="cover-photo-class">
    <img id="cover-photo1" src="images/cover-photo1.jpg" alt="Cover Photo">
  </div>
    <div class="profile-pic-class">
      <img id="ryan-profile" src="images/ryan-profile.jpg" alt"Photo of Ryan McAvoy, Developer">
    </div>
    <div class="scroll-box1">
      <figure id="p-one">
      <p>After successfully completing a Degree and Masters Degree in Law, I began searching for a job within
        the legal industry. Unfortunately (later found to be fortunate), this proved to be very difficult. Having
         some previous sales experience, I decided to accept recruitment job offer with Mortimer Spinks. At
         the time, I did not know what recruitment entailed nor did I know anything about the industry I was
        soon to be recruiting in, technology.</p>
      <p>Working as a recruiter was an eye-opening experience into the world of technology. It was only
         through working at Mortimer Spinks I began to realise how much technology is integrated into our
         daily lives. Moreover, I discovered the depth of work required to develop such technologies. </p>
      <p>The part I most enjoyed about recruitment was meeting with developers and talking about the latest
         technologies and their personal projects. I’ve always been quite entrepreneurial and once I
         discovered the capabilities of technology, I began coming up with solutions to everyday problems.
         Naturally, I did not have the skills or finance to build these ideas; having worked in recruitment I
         know how expensive building websites and apps can be. I also thought given my age (26 at the time),
         it would be too late to learn how to code. I decided to put these ideas to the back of my brain and
        focus on my career instead. </p>
      <p>Eventually, I managed secure a paralegal position within a highly respectable law firm which has
         been involved in some of England’s most notable cases in the last 30 years. I enjoy my current job
         and still like law however, these ideas are still festering at the back of my brain. I have considered
         the possibility of becoming a solicitor and then using the money from that to fund the various ideas.
         It was at this point I thought, why not become a developer yourself. I’m extremely passionate about
         technology and really believe, if not already, the tech industry is the future. Why not work as a
         developer, learn the required skills and network with the people within the industry I wish to one
         day establish my business. It does not make sense to have a career in law with the knowledge that in
         five years time I plan to establish a business within a completely different industry. </p>
      </figure>
    </div>
  </section>
</div>









<div id="div3">
  <section>
    <h1 id="#" class="second-heading">Developer Goals</h1>
      <p></p>
  </section>
</div>

<div id="div4"></div>

<div id="div5"></div>

<div id="div6"></div>



</body>


<footer></footer>





























<!-- <div id="div1">
  <head>
    <link href="styles.css" rel="stylesheet">
    <video autoplay muted loop id="myVideo">
    <source src="coding-background.mp4" type="video/mp4">
    </video>
    <title>Founders & Coders Application</title>
  </head>
  <header>RYMA Technology</header>
</div>


<div id="div2"></div>

<div id="div3"></div>

<div id="div4"></div>

<div id="div5"></div>

<div id="div6"></div>


<body>
</body>


<footer>
</footer> -->

</html>

          ```
rymatech
rymatech
4,671 Points 
          * {
  font-family: sans-serif;
  box-sizing: border-box;
}

/* This is the background video ------*/
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('http://dev2.slicejack.com/fullscreen-video-demo/img/videoframe.jpg') center center / cover no-repeat;
    }

    .fullscreen-bg__video {
        display: none;
    }
}

/* The six dividing sections ------  */

html, body {height: 100%; width: 100%; padding: 0%; margin: 0%;}

div {width: 100%; height: 100%;}

#div1 {}

#div2 {
  background: #e8e8e8;
  margin-bottom:  0;
}

#div3 { background: #304179; }
#div4 { background: #e8e8e8; }
#div5 { background: #d9d9d9 }
#div6 { background: #444; }


/* main elements --------------  */
header {
  color: white;
  text-align: center;
  font-size: 75px;
  vertical-align: middle;
  padding-top: 20%;
  padding-bottom: 0px;
  line-height:50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
}

li {
    float: right;
    font-size: 20px;

}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 12px 14px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: black;
    background-color: #fee001;
}


/* main classes --------------  */

.mainwording {
  color: white;
  text-align: center;
  border-top: solid #fee001 3px;
  margin-left: 23%;
  margin-right: 23%;
  padding-top: 5px;
  font-size: 27px;
}

.lawyer-header {
  color: black;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-size: 65px;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 0;

}
.second-heading {
  margin: 0;
  color: #e8e8e8;
  text-align: center;
  font-size: 75px;
  vertical-align: middle;
  padding-top: 50px;
  padding-bottom: 0px;
  line-height:50px;
}

/* IDs ------ */
#logo {
  height: 100px;
  width: 100px;
  margin: 0;
  position: fixed;
  z-index: +1;
}

#cover-photo1 {
  margin-left: auto;
  margin-right: auto;
  width:800px;
  height:200px;
  display: block;
  margin-bottom: 0;
}
#p-one {
  width:800px;
  height:255px;
  border-style: outset;
  text-align: justify;
  padding-top: 35px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow:10px 10px 2.5px #d9d9d9;
  background-color: white;
  font-size: 15px;
  line-height:1.5em;
  border:6px;
  overflow-y:scroll;
  margin-bottom: 0;
  margin-top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: -1;

}

  #ryan-profile {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 4px solid #d9d9d9;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -425px;
    margin-left: -100px;
    position: relative;
    margin-bottom: 0;
  }

.profile-pic-class {
  position: absolute;
  z-index: 999;
}

.cover-photo-class {
  position: relative;
  z-index: 50;
}

.scroll-box1 {
  position: relative;
  z-index: 998;
}


</style>

          ```

2 Answers

Dion Dermott
Dion Dermott
15,875 Points
Dion Dermott
Dion Dermott
15,875 Points

Hi Ryan,

When I get in a mess with z-index I often find the best thing to do is get rid of all z-index references in the CSS, take it back to square one & work it out from there.

Scroll box working here, by deleting all z-indexes :

(https://codepen.io/DeeDee23/pen/f6017c4817254ff955efe74368cabd29)[https://codepen.io/DeeDee23/pen/f6017c4817254ff955efe74368cabd29]

Hope this helps,

Dion.

Dion Dermott
Dion Dermott
15,875 Points
Dion Dermott
Dion Dermott
15,875 Points

Sorry, the link should be https://codepen.io/DeeDee23/pen/f6017c4817254ff955efe74368cabd29