How to change positions of html elements with only using css? - html

Question

I am using a wordpress and working with a theme. The theme host does not let me insert html directly into the files or let me use ftp. The only way I can do this is by using CSS. I am trying to make it so that a slideshow is at the very top of the page. The theme by default makes the website logo appear at the top which i don't want.
Here is the html
<div id="page" class="site">
<header id="masthead" class="site-header" role="banner">
</header>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<article id="post-2" class="post-2">
<header class="entry-header">
<h1>hello</h1>
</header>
<div class="entry-content">
<div class="metaslider">
</div>
</div>
</article>
</div>
</div>
</div>
I need to make it so that the div with class metaslider comes before everything else in the page. More specifically, metaslider comes before the masthead header element. I tried using position: realtive; top: -500px; but it just overlaps the logo which is not what i want, i want to push the masthead down and put metaslider on top of it.

Answer 1

Try this
#page {
position: absolute;
top: 50px;
}
</style>
Let me know if this does work

Answer 2

I used the following style information and the metaslider div was moved to the top for me.
.entry-header {
position: relative;
margin-top: 220px;
}
.metaslider {
background: rebeccapurple;
height: 200px;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
Please note that since I made the metaslider absolute, I had to give it a width and height to compensate for empty content and the case may very well vary for you.
To test for the rest of the content I replicated the entry-header as entry-body and all seems to be aligned well so far.
Here is my updated HTML and CSS:
<style>
.entry-header {
position: relative;
margin-top: 220px;
}
.metaslider {
background: rebeccapurple;
height: 200px;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
</style>
<div id="page" class="site">
<header id="masthead" class="site-header" role="banner">
</header>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<article id="post-2" class="post-2">
<header class="entry-header">
<h1>hello</h1>
</header>
<div class="entry-content">
<div class="metaslider">
</div>
<header class="entry-body">
<h1>hi</h1>
</header>
</div>
</article>
</div>
</div>
</div>