SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fixed element inside another div

    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.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <!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.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •