Fixed element inside another div

HTML & CSS
1

So I’m looking to have a fixed header in a div that is draggable (jquery-ui).

From what I know (experience) it isn’t, but I’m hoping someone can prove me wrong.

so I have a div, position:relative, overflow:auto and am looking to put a span up top, fixed and when content overflows, and scrolling happens, said span will stick to the top.

Thanks.

2

Hy,
I think it can work if you add the fixed DIV into a DIV with position:absolute .
And, that position:absolute DIV can be placed inside a position:relative DIV.

3

Hi,

position:fixed always refers to the viewport so no matter where you place it it remains fixed to the viewport and not the element that contains it.

You can’t add position:fixed and have it stay at the top of a scrolling box because as soon as the page is scrolled the scrolling box scrolls away but the fixed element does not. An element can only be fixed in respect of the viewport and not other elements.

Some people get confused and think that something like this is working:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
	width:300px;
	height:300px;
	overflow:auto;
	background:yellow;
	margin:200px;
}
.test h3 {
	position:fixed;
	background:red;
	margin:0;
	width:282px;
	height:40px;
	line-height:40px;
	border-bottom:2px solid #000;
}
</style>
</head>

<body>
<div class="test">
		<h3>header</h3>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
</div>
</body>
</html>

It seems to work in that fixed header stays still while the content scrolls in the box but it will only work as long as there is nothing else on the page that will cause the page to have a vertical scrollbar. Once the page has a vertical scrollbar then the scrolling div scrolls away but the fixed header stays exactly where it was.

If you just want a heading to an overflow box then create the overflow box oustide the header and it will work as I think you wanted.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	width:300px;
	margin:200px
}
.inner {
	width:300px;
	height:300px;
	overflow:auto;
	background:yellow;
	position:relative;
}
.wrap h3 {
	background:red;
	margin:0;
	height:40px;
	line-height:40px;
	border-bottom:2px solid #000;
	text-align:center;
}
</style>
</head>

<body>
<div class="wrap">
		<h3>header</h3>
		<div class="inner">
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
				<p>scrolling content</p>
		</div>
</div>
</body>
</html>