Question

在下面的代码中，id“#bad”里面的top属性没有任何效果，任何人都可以帮助我。当我用它时，它会产生一些效果其他一些代码。 HTML代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="rise.css">
    </head>
    <body>
        <div id="good">
            <div id="vahid">
                <div id="one">

                    <img src="image1.jpg"  id="boom"><br><br><br><br><br>
                    <!--button-->
                    <img src="button.jpg" id="button"><br><br><br><br>
                    <!--icons-->
                        <span class="local">
                            <img src="img.jpg">
                            <img src="img1.jpg">
                            <img src="img2.jpg">
                            <img src="img3.jpg">
                        </span><br><br><br><br>
                        <span class="local">
                            <img src="img4.jpg">
                            <img src="img5.jpg">
                            <img src="img6.jpg">
                            <img src="img7.jpg">
                        </span>
                </div>
            </div>
            <div id="isnani">
                 <div id="third">
                    <p >
                        <span class="fourth">Dashboard</span>      
                        <span class="fifth">  + New</span>
                    </p>
                    <!--<p class="fourth">&nbsp;</p>
                    <p id="fort"><input type="text" placeholder="search your project here..." ></p>
                    <div id="jump"><img  src="search.jpg" height="20px" width="10px"></div>-->

                    <p id="sixth">    Welcome to Flatkit</p>
                    <p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>

                </div>
            </div>
        </div>
        <div id="bad">
        </div>
    </body>
</html>

css：

#good{
    width: 100%;
    height: 100%;
}
#bad{
    width: 15%;
    height: 100%;
    background-color: #023b3b;
    top:-80%;
}
#vahid{
    float: left;
    width: 7%;
    height: 100%;
    background-color: #023b3b;
}
#isnani{
    float: left;
    width: 93%;
    height: 100%;
    background-color: bisque;
}
#one {
  display:block;
  background-color: #023b3b;
   /* width:60px;
    height: 867px;*/
}
#boom{
    margin-top: 30%;
    height: 5%;
    width: 35%;
    float: left;
    padding-left: 20px;


}
.local img {
    height: 2.5%;
    width:30%;
    margin :10px 0px 10px 20px;
}

/*isnani starts here*/
#third{  float:left;
    width:100%;
     height: 15%;
    border-color:white; 
border-style : solid;
background-color : white;

}
.fourth{
    margin-left: 2%;
    margin-top: 5%;
    font-family: sans-serif;

}
.fifth{
    color: #808080;
    font-size: 80%;
    font-weight: 800;
    font-family: arial,sans-serif;
    margin-left: 1%;

}
#sixth{
     font-family: sans-serif;
     font-size:150%;
    color:#666666;
    margin-top: 4%;
    margin-left: 2%;
    /*top: -2%;/
   /* line-height: 3%; */


}
#seventh{
    position: absolute;
     top: 11%;
    color: #808080;
    font-family: sans-serif;
    font-size: 80%;
    margin-left: 1.8%;
    margin-top: 1.5%;

    /*line-height: 3%;*/

}
#fort{
    float: right;
    margin-top: -65px;
    margin-right: 80px;
}

#button{
    margin-left: 80%;
    width: 20%;
    hyphens: 20%;
}

在上面的代码中，id“#bad”里面的top属性没有任何效果，任何人都可以帮助我。当我用它时，它会产生一些效果其他一些代码。

Answer 1

对于属性fields / top / bottom / left生效元素必须非静态定位 - 位置right / {{1 }} / relative。

将位置应用于absolute

不使用此代码的顶级属性

1 个答案: