Position fixed 100 of parent

mikelplhts picture mikelplhts · Dec 13, 2015 · Viewed 8.3k times · Source

I'm in difficulty: I have a parent element that has a size that doesn't know. And I have an item that it must place permanently at the top of the body, then position: fixed, but I cann't because giving it width: 100%, is 100% of the body, but I want 100% of the parent element. How can I do?

Example: http://codepen.io/michele96/pen/jWbYQb

Answer

Cattla picture Cattla · Dec 13, 2015

set .fixed's width as width: inherit; don't use 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;
}
<div class="container">
	<div class="fixed">Navbar Fixed</div>
</div>