我正在构建我的投资组合以进行教程,但我遇到了一些问题
'框阴影'和'标题'。我希望盒子阴影覆盖标题,就像侧边栏覆盖城市图像背景 抱歉不小心张贴。我会在下一次排队中做得更好! 感谢您的帮助!!
我仍然无法附加我的图片有问题。请点击此链接并查看我的代码:https://codepen.io/cjddlr1/pen/YNzPmK
<div class="header" style="box-shadow : 0 3px 15px black;">
</div>
<div class="body">
<div class="row">
<div class="col-xs-2" id="sidebar-left"></div>
<div class="col-xs-8" id="contents-section">
<div class="row" id="section1">
<div class="col-xs-4" id="myPicCol">
<img src="http://www.sanviator.com/app/images/logoapple.png" alt="logopic.png" id="myPicture"/>
</div>
<div class="col-xs-8">
<div class="section1">
<h1>Full-Stack Developer</h1>
<h3>My name is Chung Ik Yu.</h3>
<p>Currently living in Jinju, South Korea.</p>
<p>I'm training my front-end web development skills nowadays.</p>
<p>my final goal is emigrating to Canada using my skills and Making A lot of Money to help people around me</p>
</div>
</div>
</div>
<div class="row" id="section2">
<div class="col-xs-12">
<h2>SKILLS</h2>
<ul>
<li>HTML/CSS/BOOTSTRAP : LOW-MID</li>
<li>PHP : LOW</li>
<li>Javascript : MID</li>
<li>jQuery : LOW</li>
</ul>
</div>
</div>
<div class="row" id="section3">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<h1>Contact</h1>
<div class="row">
<div class="col-xs-6">
<p>PHONE : 010-xxxx-xxxx</p>
</div>
<div class="col-xs-6">
<p>E-MAIL : cjddlr1@coldmail.com</p>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-2" id="sidebar-right"></div>
</div>
</div>
.header{
height :50px;
overflow-x : hidden;
background-color:gray;
position : relative;
}
.body {
min-height : 100%;
overflow-x : hidden;
background-image : url('http://calgaryattractions.com/wp-content/uploads/calgary01.jpg');
background-size : cover;
}
.footer {
position: relative;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background : gray;
box-shadow : 0px -3px 15px black;
overflow-x : hidden;
}
#myPicCol {
align : center;
}
#myPicture {
height : 205px;
display: block;
margin-left : 80px;
}
#contents-section {
background : white;
}
#section1 {
padding : 30px 0 30px 0;
}
#section2 {
padding : 30px 0 30px 95px;
}
#section2 li {
margin-left : -10px;
}
#section3 {
padding : 30px 0 30px 0;
}
#section3 .col-xs-6 {
text-align : center;
}
#section3 h1 {
text-align : center;
}
#sidebar-left{
}
#sidebar-right {
}
ul {
list-style-type: none;
}
答案 0 :(得分:1)
添加z-index: 1;
在.header
并且阴影将出现在所有事物上。