Hi everyone,
My page contains 2 elements with identical attributes' values but they are differently positioned on the page !
My code:
This is what the page looks like:
Could anyone help me positioning the second element so it will overlap the first?
My page contains 2 elements with identical attributes' values but they are differently positioned on the page !
My code:
Code:
<!doctype>
<html>
<head>
<style>
<style type="text/css">
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.first {position: relative;border:1px solid red; width:70%; max-width:70%; height: 50%; max-height:50%; margin-left:15%;top:30%;}
.second {position: absolute;border:1px solid green; width:70%; max-width:70%; height: 50%; max-height:50%; margin-left:15%;top:30%;}
</style>
</head>
<body>
<p class = "first">abcd</p>
<p class = "second">abcd</p>
</body>
</html>Could anyone help me positioning the second element so it will overlap the first?
