Currently, I am diving into the world of HTML and have included a relative div in my code.
Although there are two additional divs positioned before it, they do not overlap; unfortunately, the first two still occupy space above the relative one. My desire is for it to be at the top of the page.
The code snippet :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>I strive to elevate the "Foo bar" div so that it aligns with the two buttons on the same level.