如何只使用css来改变html元素的位置？
如何只使用css来改变html元素的位置？
提问于 2018-07-16 00:49:11
我正在使用wordpress和一个主题工作。主题主机不允许我直接在文件中插入html，也不允许我使用ftp。我唯一能做到这一点的方法就是使用CSS。我正在努力使它，以便幻灯片是在最顶部的页面。默认情况下，主题使网站徽标出现在顶部，这是我不想要的。
这是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>我需要这样做，以便包含类metaslider的div位于页面中的其他所有内容之前。更具体地说，metaslider位于masthead header元素之前。我试着使用position: realtive; top: -500px;，但它只是重叠的标志，这不是我想要的，我想推下masthead，并将metaslider放在上面。
回答 2
Stack Overflow用户
发布于 2018-07-16 01:22:03
尝尝这个
#page {
position: absolute;
top: 50px;
}
</style>如果有效，请让我知道
Stack Overflow用户
发布于 2018-07-16 13:50:58
我使用了以下样式信息，并将metaslider div移到了顶部。
.entry-header {
position: relative;
margin-top: 220px;
}
.metaslider {
background: rebeccapurple;
height: 200px;
position: absolute;
width: 100%;
left: 0;
top: 0;
}请注意，因为我将metaslider设为绝对的，所以我必须给它一个宽度和高度，以补偿空内容，情况可能会对你有所不同。
为了测试其余的内容，我复制了entry-header作为entry-body，到目前为止一切似乎都对齐得很好。
以下是我更新的HTML和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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51350291
复制相关文章
相似问题