Fix position of div with respect to another div

neha_k · September 4, 2016, 3:34pm

Here is my code.

<head>
<style>
.parent
{
	width:1100px;
	border:1px solid red;
	height:1500px;
	position:relative;
}
.childfix
{
	width:300px;
	float:left;
	border:1px solid green;
	height:200px;
	position:fixed;/*when using this childfix remains fix for whole web page*/
	top:5px;
}
.childscroll
{
	width:680px;
	float:left;
	border:1px solid yellow;
	height:1400px;
}
.anotherclass
{
	width:1100px;
	height:600px;
	border:1px solid orange;
}
.clearfix
{
	clear:both;
}
</style>
</head>
<body>
	<div class="parent"><!--parent class-->
		<div class="childfix"><!-- class has to be fixed with only parent class -->
			
			
		</div>
		<div class="childscroll"><!-- This class has to be scrolled with parent -->
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="anotherclass"><!-- for thhis there is no fixed class -->
	</div>
	
	
	
</body>

ronpat · September 4, 2016, 3:40pm

neha_k,

Where is the <!doctype>?

I don’t know if this is relevant to your issue or not, but one cannot use Javascript comment marks within CSS.

That means that the next line after this one is invalid.
position:fixed;//when using this childfix remains fix for whole web page

Hope this helps.

neha_k · September 4, 2016, 3:52pm

ronpat · September 4, 2016, 4:39pm

neha_k, can you please add more information about this issue to help explain the problem. I see the word “scrolling” within your comments but I also see all fixed heights. I do not understand what you expect to achieve. Perhaps you can expand your “working page” by adding content that shows what does and does not work.

You can probably reduce the dimensions of the boxes considerably for the demo so it fits on an average sized desktop monitor.

Ray.H · September 4, 2016, 5:40pm

Yes, That is the normal behavior of position: fixed elements.

They are fixed in relation to the viewport. Not the parent element.

neha_k · September 4, 2016, 5:49pm

So, how can i fix that class with parent ?

Ray.H · September 4, 2016, 5:59pm

The only way you can make it APPEAR to be in relation to parent is to NOT set an offset coordinate. That means do not set a top: bottom: left: or right: value. But then you have no control of it with the offset properties, however it can be moved with negative margins

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Test</title>
<style>

.wrap {
    width:50%;
    margin:50px auto;
    background:red;
}
.item {
    position:fixed;
    /*top:5px; now it APPEARS to be in relation to parent*/
    margin-top:-50px;
    background: lightblue;
}
p {margin:150px 0;}
</style>
</head>

<body>

<div class="wrap">
    <div class="item">position fixed child</div>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>

</body>
</html>

Ray.H · September 4, 2016, 6:09pm

Sorry, I had to make some edits. There was some irrelevant code in my example.

neha_k · September 4, 2016, 6:11pm

I am saying the fixed has to be fixed only with scrolling text.When I add another div after wrap.
fixed also has to be scrolled out.
Sorry for poor english

Ray.H · September 4, 2016, 6:19pm

Then you can’t use fixed positioning.
Your option then would be to use position:absolute; on the child element.

That changes the rules of the game to your advantage though, now you CAN position in relation to the parent by setting position:relative on the parent.

Example coming…

neha_k · September 4, 2016, 6:21pm

Already tried .not work for me.Waiting for example

Ray.H · September 4, 2016, 6:28pm

If you are wanting it fixed to it’s parent and then to scroll out of view when the parent scrolls out of view then you would need a script to do that. Not possible with CSS.

Here is the absolute position example, but I don’t think it’s what you want.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Absolute Test</title>
<style>

.wrap {
    position:relative; /*establish containing block*/
    width:50%;
    margin:50px auto;
    background:red;
}
.item {
    position:absolute;
    top:0;
    left:-100px; /*now it is in relation to parent*/
    background: lightblue;
}
p {margin:100px 0;}
</style>
</head>

<body>

<div class="wrap">
    <div class="item">absolute child</div>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>

<div class="wrap">
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>

</body>
</html>

neha_k · September 4, 2016, 6:33pm

yeah not that Will try with script

ronpat · September 4, 2016, 6:34pm

When you posted your first message, you put your code in a code box. Please continue doing that.

There is no need to quote Ray’s code when replying to Ray.H

neha_k · September 4, 2016, 6:38pm

Sure.Next time Will care

ronpat · September 4, 2016, 6:45pm

I’ve been out of the house, not following Ray’s code, but since you are not yet satisfied with his efforts, may I suggest that, instead of code, you post an annotated, simulated screen shot, a photoshop drawing, that shows what you want to achieve. We might have better luck that way.

neha_k · September 4, 2016, 6:51pm

Something like this.Mobile picture is fixed while other info scrollable .After that It also scrolled out.

Mittineague · September 4, 2016, 7:14pm

If I am understanding what you want, there is some misunderstanding as a result of your not understanding what is happening on that page.

That is, you used the wrong terminology and posted in the wrong category.

You do not mean “position: fixed” in terms of CSS

Do you mean something more like this?

How can I move the content that displays in a pane relative to when the position of the mouse moves over the content of a different pane.

TBH it would not surprise me all that much if this could be achieved using only CSS these days.

But that page depends on JavaScript code to do what it does.
In fact if you disable JavaScript that page is useless.

Ray.H · September 4, 2016, 8:00pm

It seems there is a way with css only.

Position:sticky; to the rescue.

It is still experimental though, probably not ready to turn loose.

EDIT: It’s working for me in firefox vsn48
Not working in IE11 and Old Chrome Version 52.0.2743.116 (updating it now)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Position Sticky Test</title>
<style>

.wrap {
    width:400px;
    margin:40px auto;
    background:red;
}
.item {
    width:200px;
    min-height:100px;
    padding:10px;
    position: -webkit-sticky;
    position: sticky;
    top:-1px;
    margin-left: -220px;
    background:lime;
}
p {margin:100px 0;}

</style>
</head>

<body>

<div class="wrap">
    <div class="item">sticky child 1</div>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>

<div class="wrap">
    <div class="item">sticky child 2</div>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>
<div class="wrap">
    <div class="item">sticky child 3</div>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
    <p>Scrolling text</p>
</div>

</body>
</html>

SamA74 · September 5, 2016, 8:16am

It only works in FF and Safari so far.

I have used it, where non-critical.

Topic		Replies	Views
Position:fixed; not behaving properly in all browsers, scrolling with page HTML & CSS	2	8166	October 8, 2014
Script Request: Fixed-Relative Positioning JavaScript	6	624	February 1, 2010
Facing problem with fixed position HTML & CSS	13	12774	April 10, 2015
Delayed position: fixed HTML & CSS	15	7321	November 7, 2016
Position:fix Headers HTML & CSS	4	534	January 28, 2011

Fix position of div with respect to another div

Related topics