开发者社区> 问答> 正文

CSS的position定位布局问题

HTML部分

<div class="container">
    <div class="logo">
        <a href="#"><img src="img/logo.svg" alt="logo"></a>
    </div>
    <div class="menu"></div>
</div>


CSS部分

.container {

width: 100%;
max-width: 1200px;
margin: 0 auto;

}

.header {

background: rgba(255,255,255,.5);
width: 100%;
height: 100px;
line-height: 100px;
font-size: 20px;
position: fixed;
overflow: hidden;
z-index: 99;

}

.logo,
.menu {

position: absolute;
top: 50%;
-webkit-transform: translate(0,-50%);
   -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
     -o-transform: translate(0,-50%);
        transform: translate(0,-50%);

}

.logo {

width: 90px;
height: 60px;

}

.logo img {

width: 100%;
position: absolute;
top: 0;

}

.menu {

right: 0;
background: #45b29a;
width: 60px;
height: 60px;
border-radius: 50%;

}
这是实际效果:

首先 header 的 position 是 fixed 这个前提不能改变, header 的高度是 100px,logo 和 menu 的高度都是 40px ,我想让它们垂直居中于 header ,所以我给他们加了 position: absolute;top: 50%; 和 transform: translate(0,-50%); 不用 margin 的原因是因为我想让它自适应 header 的高度来垂直居中,因为 header 在移动端的高度会变成 60px,logo 和 menu 的高度也会变成 40px,而如果用 margin 的话,在移动端还得重新设置一下 margin ,这样就不能自动适应垂直居中了,然后问题来了,我用 positoin 定位后,再分别对 logo 和 menu 使用 left: 0; 和 right: 0; 后,它们会脱离 contaier 的束缚,直接跑到 header 的两端(上图中的 logo 并没有跑到最左侧是因为没有给它加上 left: 0;)。

我一开始是这么想的,给这个 container 加上 position: relative; ,然并卵,它们的 top: 50%; 没用了:

.header .container {

position: relative;

}
实际效果:
screenshot

展开
收起
a123456678 2016-05-27 15:10:16 2317 0
1 条回答
写回答
取消 提交回答
  • 可以使用margin-top的属性,到时候你再通过@media screen and (max-width: xxxpx) {}把margin-top大小改掉

    2019-07-17 19:17:58
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载