为什么我的背景覆盖了我的主要部分？

时间：2015-09-29 15:50:28

标签： css twitter-bootstrap background

我的背景覆盖了我的主要部分，但我的旁边正确显示。

一旦我删除了我的背景，我将显示一个主要部分的div，但主要部分本身不受CSS修改的影响。

我想知道如何简单地在我网站的主要部分添加内容，而不会将其覆盖在背景或旁白部分。 Tnanks很多！

Here's the Codepen 

<html>

    <head>
        <title>JOB</title>
        <meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
        <script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>       
        <script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
        <script src="script/jquery.js" type="text/javascript"></script>
        <script src="background.js" type="text/javascript"></script>
        <script src="style.js" type="text/javascript"></script>
        <script src="jquery.nicescroll.min.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>

        <!-- -- -- -- BACKGROUND -- -- -- -->
        <div id="opacity"> 
            <img src="http://img15.hostingpics.net/pics/798507nycsky.jpg" alt="" class="nyc" />
        </div> 

        <aside class="Aside animated fadeInLeft">   

            <!-- -- -- -- LOGO -- -- -- -->
            <h1 class="logo">
                Firstname <br/>
                NAME <br/>
                <span class="orange">
                JOB <br/>
                Company<br/>
                </span> 
            </h1>

            <!-- -- -- -- HIRE ME ITEMS-- -- -- -->
            <div id="hireme" class="text-center">

            <!-- -- -- -- PORTFOLIO -- -- -- -->
            <h1 class="menu">Slider</h1>

            <!-- SLIDER -->
            <div id="slider" class="container"><br>
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <!-- <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ol> -->
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active"><img src="" alt="Bukowski" width="460" height="345"></div>
                        <div class="item"><img src="" alt="Futsal" width="460" height="345"></div>
                        <div class="item"><img src="img/coffeeshop.jpg" alt="Coffee Shop" width="460" height="345"></div>
                    </div
                    <!-- Left and right controls -->
                    <a style="margin-left: auto" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a style="margin-right:auto" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <!-- -- -- -- ORANGE DOT -- -- -- -->
            <div class="puce"></div>

            <!-- -- -- -- RESUME -- -- -- -->
            <h1 class="menu">File</h1>
                <div class="bigBox boxHover hvr-underline-from-center"><p>View PDF</p></div> <br>
                <div class="resumeBox boxHover hvr-underline-from-center"><span class="glyphicon glyphicon-download-alt resumeBoxIcon"></span></div>
                <div class="resumeBox boxHover hvr-underline-from-center"><span class="glyphicon glyphicon-print resumeBoxIcon"></span></div>
                <div class="resumeBox boxHover hvr-underline-from-center"><span class="glyphicon glyphicon-share-alt resumeBoxIcon"></span></div>

            <!-- -- -- -- ORANGE DOT -- -- -- -->
            <div class="puce"></div>

            <!-- -- -- -- CONTACT -- -- -- -->
            <h1 class="menu">Contact</h1>
                <div class="bigBox boxHover hvr-underline-from-center"><p id="contactNumber">212-555-1234</p></div><br>
                <div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-at"></i></div>
                <div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-skype"></i></span></div>
            </div> <!-- #slider -->
            </div> <!-- #hireme -->

            <!-- -- -- -- LEGAL / CREDITS -- -- -- -->  
            <p id="footer">Credits | About</p>

        </aside>

        <main class="Main">
            <div id="redSquare">LOREM IPSUM BLA BLA BLA</div>
        </main>
    </body>

</html>

CSS 

html {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  color: rgba(0,0,0,.2);
  overflow: hidden;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* HOMEPAGE BLUE FILTER EFFECT */
img.nyc {
    /*position:fixed;*/
    left:0;
    z-index:-1;
}
#opacity {
    position : fixed;
    background-color: #1349A3;
    display:inline-block;
} 
#opacity img {
    opacity: 0.2;
    -webkit-animation: animation 1s linear;
    -moz-animation: animation 1s linear;
    -ms-animation: animation 1s linear;
    -o-animation: animation 1s linear;
    animation: animation 1s linear;
}
@-webkit-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.2;
    }
}
@-moz-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-ms-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.2;
    }
}
@-o-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.2;
    }
}
@keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.2;
    }
}

.Aside {
  width: 150px;
  height: 100%;
  position: fixed;
  overflow: auto;
  background-color: rgba(19, 73, 163, 0.8);
}

}
.Main {
  height: 100%;
  padding-left: 150px;
  overflow: auto;
  background-color: pink;

}

.logo{
    color : white;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 2em;
    line-height : 22px;
    margin-top : 10px;
    margin-bottom : 0;
    margin-left : 10px;
}

.orange{
    color : #E9621E;
}

#hireme {
    margin-top : 50px;
}

.menu {
    color : white;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 1.3em;
    line-height : 30px;
    margin-top : 0px;
    margin-bottom : 0px;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
}

#slider{
    margin-top : -15px;
    width:150px; 
    background-color : transparent;
}

.puce{
    -moz-border-radius: 10px/10px;
    -webkit-border-radius: 10px 10px;
    border-radius: 10px/10px;
    border:solid 5px #E9621E;
    width:5px;
    height:5px;   
    margin-left : auto;
    margin-right : auto;
    margin-top : 15px;
    margin-bottom : 15px;
}

.bigBox {
    background-color : white;
    color : #1349A3;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 1em;
    width : 110px;
    height : 30px;
    line-height : 30px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 5px;
}

.resumeBox {
    background-color : white;
    width : 34px;
    margin-top : 5px;
  line-height : 30px;
  height : 30px;
}

.resumeBoxIcon {
    color : #1349A3;
    height : 30px;
    line-height : 30px;
}

#contactNumber {
    font-size : 0.88em;
}

.contactBox {
    background-color : white;
    width : 53px;
    height : 30px;
    line-height : 30px;
    margin-top : 5px;
}

#contactIcon {
    color : #1349A3;
    font-size : 1.5em;
    line-height : 30px;
    height:30px;
}

.fa-faat{color : #1349A3;
    font-size : 1.5em;
    line-height : 30px;
    height:30px;
}

#footer{
    color : white;
    font-size : 0.7em;
    text-align : center;
    position : fixed;
    bottom : 0;
    left : 10px;

}

#redSquare{width:500px;
height : 500px;
background-color : red;}

/* HOVER EFFECTS */
.hvr-underline-from-center{
    display:inline-block;
    vertical-align:middle;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-osx-font-smoothing:grayscale;
    position:relative;
    overflow:hidden
}
.hvr-underline-from-center:before{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    right:50%;
    bottom:0;
    background:white;
    height:4px;
    -webkit-transition-property:left,right;
    transition-property:left,right;
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out
}
.hvr-underline-from-center:active:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:hover:before{
    left:0;
    right:0
}

1 个答案:

答案 0 :(得分：0)

好的，这是你想要的吗？ http://codepen.io/anon/pen/bVgVxj?editors=110

我所做的就是在}之后摆脱额外的.Aside并且这个：

.Main {
  height: 100%;
  padding-left: 150px;
  overflow: auto;
  /*background-color: pink;*/
  position: relative; //added this here
}
相关问题
最新问题