我想创建一种LinkedIN外观，其中个人资料照片位于封面照片的一半和下面的文本/段落框的一半（我认为它看起来很酷），但是当我做到这一点时，滚动框将停止工作。我尝试过zline以及相对和绝对，但似乎没有任何效果。
预先感谢，现在被困在一两天了。
* {
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><!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>
答案 0 :(得分：0)
希望我对这个问题没有误解您的目标，所以请告诉我我是否这样做。
无论如何，要提升个人资料图片，您只需要使用margin-left: auto;和margin-right: auto将其居中，然后使用margin-top将其提升到上方的元素中即可。 margin-top的值将是个人资料图片高度的50％乘以-1。
我还通过将封面照片设置为包含您的标题文本的background-image的{{1}}来稍微调整了封面照片。这样可以固定封面照片下的边距。
<div> 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;
}