当前位置:  开发笔记 > 后端 > 正文

位置固定100父母

如何解决《位置固定100父母》经验,为你挑选了2个好方法。

我遇到了困难:我有一个父元素,其大小不知道.而且我有一个物品必须永久地放在身体的顶部,然后position: fixed,但我不能因为给它width: 100%,是100%的身体,但我想要100%的父元素.我能怎么做?

示例:http://codepen.io/michele96/pen/jWbYQb



1> Cattla..:

设置.fixed的宽度为width: inherit; 不使用100%

body {
	padding: 0;
	margin: 0 auto;
}
.container {
	position: relative;
	width: 70%;
	height: 1000px;
	background: red;
}

.fixed {
	position: fixed;
	width: inherit; /*change here*/
	line-height: 50px;
	background: blue;
	color: #f0f0f0;
	text-align: center;
	font-size: 20px;
}
Navbar Fixed


2> Oriol..:

问题在于,与绝对定位的元素不同,固定定位元素的包含块通常是视口,而不是其最近定位的元素.然后,width: 100%相对于视口宽度进行解析.

有一些方法可以改变这种行为,例如,transform为固定位置的后代建立一个包含块的元素.但是,您的元素将不会固定在视口的顶部.

相反,你应该使用粘性定位:

.fixed {
  position: sticky;
  top: 0;
}

body {
  padding: 0;
  margin: 0 auto;
}
.container {
  width: 70%;
  height: 1000px;
  background: red;
}
.fixed {
  position: sticky;
  top: 0;
  line-height: 50px;
  background: blue;
  color: #f0f0f0;
  text-align: center;
  font-size: 20px;
}
Navbar Fixed
推荐阅读
雨天是最美
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有