asked on

CSS using position absolute for the X-axis and relative for the Y-axis at the same time

I would like to move a div to being relative top: -100px and then lock it to the left with absolute left 20px is it possible to use relative in the y axis and absolute in the x axis?

David S.

Sure, just leave the "top" and "bottom" properties unset (or set them specifically to "auto") and use the "margin-top" property instead. In certain cases, there may need to be another adjustment made as well, e.g. if the previous sibling is floated.

Dan

ASKER

That does not work because that makes its x position relative to the div it is in, I want the x position to be outside the current div and locked to the left at absolute left 50.

The problem is I need it relative on one axis and absolute on the other.

Steve Bink

>>> The problem is I need it relative on one axis and absolute on the other.

That is not possible in CSS.

David S.

It seems I misinterpreted what you were asking then, before you clarified.

Is there any certainty for how far the "div it is in" is offset from the left edge of page for all relevant breakpoints? This includes if it's centered horizontally within the page and has a known width. It is rather difficult to provide complete answers without seeing any of the relevant code.

Dan

ASKER

I have simplified the code down to this:

<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
    background-color: #00FFFF;
    width: 500px;
    height: 200px;
}
</style>
</head>
<body>
<center>


<div class="scroll">
<p><div style="position: relative; top: -10px; left: -200px"><a href="#"><img style="position: relative; left: -80px; top: 50px width: 36; height: 36;" src="fb-circle.png" width="36" height="36" /></a><a href="test"><img style="position: relative; left: -80px; top: 80px width: 36; height: 36;" src="tw-circle.png" alt="" width="36" height="36" /></a><a href="test"><img style="position: relative; left: -80px; top: 110px width: 36; height: 36;" src="mail-circle.png" alt="" width="36" height="36" /></a></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</center>
</body>
</html>

Open in new window

There are two problems in my example here (1) is that all the text is pushed down (2) the bigger issue is I don't want the icons to the left of the block, but tied to the left hand side, so as the screen resizes the always stay on the hard left.

What this gives is:

What I want is:

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dan

ASKER

David,

Thanks, that is almost perfect, I have one issue can this be achieved without setting the width of the box to 500px, as it is in a box that is a dynamic size and will scale with the window (pushed by the margins on each side). The absolute version is the one we want so I have simplified it to this, but I just need to remove the hard width, can you help

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.scroll {
	background-color: #f0f0f0;
	width: 500px;
	position: relative;
	margin: 0 auto; /* <center> has been obsolete for a long time */
}
.quickLinks {
	margin-top: -10px;
	width: 180px;
	min-height:30px;
}
@media all and (min-width:760px) {
	.quickLinks {
		position: absolute;
		z-index: 7999;
		/* with of the positioning context element plus any padding, margins, and
		borders (e.g. the default ones on body) minus the width of the window,
		divided by 2 */
		left: -moz-calc((500px + 16px - 100vw) / 2);
		left: -webkit-calc((500px + 16px - 100vw) / 2);
		left: calc((500px + 16px - 100vw) / 2); /* spaces within calc() are required */
		/* adjustments can also be made with margin-left instead of changing the calculation */
	}
	.quickLinks.fixed {
		position: fixed;
		left: 0;
	}
}
</style>
</head>
<body>

<div class="scroll">
<div class="quickLinks"><a href="#"><img style="position: relative; left: 20px; top: 0px; width: 36px; height: 36px;" src="fb-circle.png" width="36" height="36" /></a><a href="test"><img style="position: relative; left: 20px; top: 0px; width: 36px; height: 36px;" src="tw-circle.png" alt="" width="36" height="36" /></a><a href="test"><img style="position: relative; left: 20px; top: 0px; width: 36px; height: 36px;" src="mail-circle.png" alt="" width="36" height="36" /></a></div>
<h1>My Heading</h1>

<hr />

<h5>Sub heading</h5>
</div> <!-- /.scroll -->
</body>
</html>

Open in new window

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dan

ASKER

Thank you, can I ask if there was any reason you choose to set z-index to 7999?

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial