html怎么定位布局位置,CSS的position定位布局问题

HTML部分

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;

}

实际效果：

请问各位大神要怎么在不用 float 只用 position 的情况下使得 logo 和 menu 不脱离 container 呢(就是 logo 在图片一中的原来位置，menu 在图片一中的红色圆圈位置)。

想要的位置效果：

html怎么定位布局位置,CSS的position定位布局问题相关推荐

vue-amap实现实现初始化并定位当前位置，搜索，定位，增加点标记
实现如图展示,初始化并定位当前位置,搜索,定位,增加点标记下载vue 1.vue页设置如果是新版web-js的密钥,有配套的安全秘钥,则需要另外在created加入,否则会报undefined w ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘要信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
relative布局html,CSS的四种布局方式static/relative/fixed/absolute
static static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响.布局元素的位置即其在标准文档流中的位置. relat ...
高德sdk定位当前位置_单次定位-获取位置-开发指南-iOS 定位SDK | 高德地图API
iOS定位SDK提供的单次定位方法基于苹果定位核心,苹果定位核心会在设备移动时连续返回定位结果,高德在此基础上封装了单次定位.当设备可以正常联网时,还可以返回该定位点的对应的中国境内位置信息(包括:省 ...
ios 高德获取定位_单次定位-获取位置-开发指南-iOS 定位SDK | 高德地图API
iOS定位SDK提供的单次定位方法基于苹果定位核心,苹果定位核心会在设备移动时连续返回定位结果,高德在此基础上封装了单次定位.当设备可以正常联网时,还可以返回该定位点的对应的中国境内位置信息(包括:省 ...
css文字定位最右边,CSS 控制文字定位
CSS 控制文字定位作者:不详来源: 日期:2002-8-5 [code] P.double {line-height: 2} P.right {text-align: right} P.cent ...
如何在html定位一张图片,css图片怎么定位？
我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字.绝对值和相对值进行指定.下面我们来看一下css定位图片的方法. background-positio ...

html怎么定位布局位置,CSS的position定位布局问题

html怎么定位布局位置,CSS的position定位布局问题相关推荐

最新文章

热门文章