dream hunter dream hunter - 3 months ago 8
HTML Question

the top property in not working on this code

in the below code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with

some other codes.
html code :

<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%;
}


in the above code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with

some other codes.

Answer

For properties top/bottom/left/right to take effect element must be positioned non-statically - have position relative/absolute/fixed.

Apply position to your #bad

Comments