首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Z索引阻止滚动框在CSS中工作

Z索引阻止滚动框在CSS中工作
EN

Stack Overflow用户
提问于 2018-08-10 03:24:58
回答 1查看 184关注 0票数 0

我想创建一种LinkedIN外观,在封面照片的一半和下面的文本/段落框的一半上放置头像(我认为这看起来很酷),但当我实现这一点时,滚动框停止工作。我已经尝试了zline、相对和绝对,但似乎都不起作用。

提前感谢,我已经坚持了一两天了。

代码语言:javascript
复制
* {
  font-family: sans-serif;
  box-sizing: border-box;
}

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

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

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

#div2 {
  background: #e8e8e8;
  position: relative;
  z-index: -2;
}


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

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

/* THREE CLASSES, Cover, Profile, scroll box  */


.ryan-profile {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 4px solid #d9d9d9;
  display: block;
  /* top: 50%;
  left: 50%; */
  margin-top: -100px;
  margin-left: 600px;
  margin-bottom: 0;
  position: absolute;
  z-index: 5;
}

.cover-photo1 {
  margin-left: auto;
  margin-right: auto;
  width:800px;
  height:200px;
  display: block;
  margin-bottom: 0;
  position: relative;
  z-index: 4;
}
.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: 2;
}



</style>
代码语言:javascript
复制
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet">



<body>
<div id="div2">
  <section>
    <h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>

  <div>
    <img class="cover-photo1" src="images/cover-photo1.jpg" alt="Cover Photo">
  </div>

    <div class="profile-pic-class">
      <img class="ryan-profile" src="images/ryan-profile.jpg" alt"Photo of Ryan McAvoy, Developer">
    </div>
    <div class="scroll-box1">
      <figure class="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>
</body>
</html>

EN

回答 1

Stack Overflow用户

发布于 2018-08-10 04:46:38

希望我在这个问题上没有误解你的目标,所以如果我误解了,请告诉我。

无论如何,要提升头像,只需使用margin-left: auto;margin-right: auto将其居中,然后使用margin-top将其提升到上面的元素中。margin-top的值是头像高度的50%乘以-1。

我还通过将其设置为包含标题文本的<div>background-image,对您的封面照片进行了一些调整。这固定了封面照片下面的页边距。

代码语言:javascript
复制
  text-align: center;* {
  font-family: sans-serif;
  box-sizing: border-box;
}


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

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

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

#div2 {
  background: #e8e8e8;
  position: relative;
  z-index: -2;
}


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



/* THREE CLASSES, Cover, Profile, scroll box  */

.ryan-profile {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 4px solid #d9d9d9;
  display: block;
  position: relative;
  margin-bottom: 0;
  z-index: 5;
}

.cover-photo1 {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  height: 200px;
  display: block;
  margin-bottom: 0;
  position: relative;
  z-index: 4;
}

.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: 2;
}


/* ===== New ===== */

.profile-pic-class img {
  margin-left: auto;
  margin-right: auto;
  margin-top: -75px;
  /* Raise your profile picture by 50% of your profile picture's height */
}

.cover-photo {
  background-image: url("https://cdn.britannica.com/08/100608-004-B89F31B2.jpg");
  background-size: cover;
  background-position: center;
}

.cover-photo h1 {
  text-align: center;
  color: black;
  margin-top: 0;
  text-align: center;
  font-size: 65px;
  margin-bottom: 100px;
}
代码语言:javascript
复制
<div id="div2">
  <section>
    <div class="cover-photo">
      <h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>
    </div>

    <div class="profile-pic-class">
      <img class="ryan-profile" src="images/ryan-profile.jpg" alt "Photo of Ryan McAvoy, Developer">
    </div>
    <div class="scroll-box1">
      <figure class="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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51774438

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档