Related
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?
Sample html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."
So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
Incase someone wants to postion a child div directly under a parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
Working demo Codepen
If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example
Example 1::
http://jsfiddle.net/Cr9KB/1/
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
Here parent class has no position so element is placed according to body.
Example 2::
http://jsfiddle.net/Cr9KB/2/
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent.
In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area
You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful
function toggleOpen() {
const element = document.getElementById("sideContnet");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
.container {
display: flex;
margin: 0 auto;
width: 600px;
}
.contentBig {
width: 600px;
min-width: 66%;
position: relative;
}
.contentSmall {
width: 230px;
min-width: 33%;
}
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
}
.fiexBack {
position: fixed;
background-color: red;
bottom: 20px;
padding: 5px;
}
.button {
width: 200px;
padding: 12px;
background-color: coral;
margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
toggle open side content
</button>
<div class="container">
<div class="contentBig">
<div class="absolute">
<div class="fiexBack">Back</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
<div id="sideContnet" class="contentSmall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
</div>
Full Code Example
Here is the description of the feature I really struggle to do.
Mockup
Description
A generated pdf document contains many sections
Some sections can print on many pages
We don't know the size of the content (variable height)
The page must not have margins (the headers are positioned (0,0) and have the same width as the page, documents are printed bordeless)
The content can be anything : paragraphs, titles, images, graphs, svg elements, tables, ...
Objective
When the content of a section auto break on the next page, that page should have a margin equal to the header
Exemple: the section #2 is printed on the pages 2 & 3 ; the page 3 should have a top margin.
Problem
Because the page margins are set to "0", we should define a padding/margin after a natural page break but, I can't find how to make it work nicely (1)
Technical
I'm using RelaxedJS (pdf is generated with Chromium)
Thank you so much in advance if you know how to handle that specific case. I've read so many documentation. The best candidate could be CSS Fragmentation Box Decoration Break Clone but I can't make it work with blocks, only inline elements and paragraphs.
(1) I have tried a solution using table and a thead setting the margin on top of the page... but it's not working when you fill the cells with content. I guess the has serious limitations when using #page rules.
I had to face the same issue a few days ago.
The idea was simple, you have to do this:
Set #page margins (considering the height of the header and footer)
Set header and footer position: fixed and adjust the top and bottom properties.
Control the .page-content with page-break-after to make sure the content go to the next pages.
Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.
I hope this can help you. Here is the same code in Codepen
#page {
margin: 160px 0px;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h2 {
text-align: left;
margin-left: 50px;
}
header {
background-color: yellow;
width: 100%;
height: 120px;
color: black;
display: flex;
align-items: center;
position: fixed;
top: -120px;
left: 0px;
right: 0px;
}
.page-content {
margin-top: 0px;
margin-bottom: 60px;
}
.page-content p {
page-break-after: always;
padding: 5px 30px;
}
.page-content p:last-child {
page-break-after: never;
}
footer {
position: fixed;
bottom: 50px;
right: 0;
left: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
height: 50px;
}
footer, .page-content {
margin-left: 100px;
border-left: solid black 1px;
}
<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
<p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
<p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
<p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
<p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>
I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+
Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>
Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>
Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?
Sample html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."
So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
Incase someone wants to postion a child div directly under a parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
Working demo Codepen
If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example
Example 1::
http://jsfiddle.net/Cr9KB/1/
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
Here parent class has no position so element is placed according to body.
Example 2::
http://jsfiddle.net/Cr9KB/2/
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent.
In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area
You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful
function toggleOpen() {
const element = document.getElementById("sideContnet");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
.container {
display: flex;
margin: 0 auto;
width: 600px;
}
.contentBig {
width: 600px;
min-width: 66%;
position: relative;
}
.contentSmall {
width: 230px;
min-width: 33%;
}
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
}
.fiexBack {
position: fixed;
background-color: red;
bottom: 20px;
padding: 5px;
}
.button {
width: 200px;
padding: 12px;
background-color: coral;
margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
toggle open side content
</button>
<div class="container">
<div class="contentBig">
<div class="absolute">
<div class="fiexBack">Back</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
<div id="sideContnet" class="contentSmall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
</div>
Full Code Example
I asked this question which worked great for making text (top links) forced to the right after scrolling.
The issue is one on the page, when I scroll vertically, the top links stay on the top of the page even when I scroll down so they show above my main content.
What is a way to force text to be forced to the right but don't move when I scroll vertically?
Here is my CSS today:
#toplinks ul
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:medium none;
color:#2F6FAB;
cursor:default;
line-height:1.4em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 1em 0 1em;
text-align:right;
z-index:0;
font-size: 85%;
position:fixed;
right:0;
}
I think you want something like this. Correct me if I am wrong. I edited ptriek's code and fixed it so that the sticky thing doesn't move if the page is vertically scrolled but moves with the page keeping its position fixed if the page is horizontally scrolled.
The CSS code is the same:
#sticky
{
background:red;
position: fixed;
top: 0px;
right: 0px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
p {
width:1000px;
}
But the JavaScript code is slightly modified:
$(window).scroll(function(event) {
$("#sticky").css("margin-top", 0-$(document).scrollTop());
});
Alternately, this can be done without JavaScript as Aaron has suggested. You can see the effect here.
I hope it works.
You can use z-index to make your relatively-positioned content overlay your fixed content when scrolled, as per this example: http://jsfiddle.net/R4jEj/.
You'll need a combination of CSS + jQuery to achieve this. My answer was inspired by this question, which does the exact oposite.
http://jsfiddle.net/hEvSu/
The JS:
$(document).ready(function () {
var o = $("#sticky").offset();
s = o.left;
});
$(window).scroll(function () {
$("#sticky").offset({ left: s - $(window).scrollLeft() });
});
The CSS:
#sticky {
background:red;
position: fixed;
bottom: 35px;
right: 0px;
width: 206px;
}
p {
width:1000px;
}
May be for that page you can define position:absolute instead of position:fixed.
Like this:
#fixed {
position: absolute;
height: 20px;
padding: 5px;
background-color: #333;
color: #fff;
right: 0;
top:0;
}
#container {
margin-top: 30px;
padding: 5px;
}
http://jsfiddle.net/R4jEj/2/
Try this
<div id="header">
<div id="right">
<div class="link">test</div>
</div>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat nulla, rhoncus vel vestibulum a, adipiscing et eros. Curabitur nibh est, mattis ac euismod quis, dapibus vitae mauris. Nam scelerisque augue sit amet justo vulputate laoreet. Nulla eu est metus. Nulla tristique, lorem sit amet lobortis sodales, purus felis congue mi, id auctor ligula urna ac massa. Praesent venenatis vulputate porttitor. Fusce eget justo dolor. Praesent vel ipsum id metus bibendum porta. Nunc gravida, tortor non tincidunt posuere, ante turpis bibendum nulla, sed ultricies sem felis et arcu. Maecenas faucibus lectus sed nibh tincidunt sed vulputate massa tristique. Curabitur pulvinar, ante a luctus ornare, ipsum massa faucibus tellus, et faucibus odio orci sed arcu. Suspendisse tincidunt rutrum lorem malesuada viverra. Duis eleifend lobortis augue, ut gravida odio scelerisque ac. Phasellus bibendum hendrerit eros, nec adipiscing neque dignissim ut.
<br/><br/>
Praesent dictum hendrerit felis quis porttitor. Duis at tortor eu nibh cursus pretium in vitae libero. Maecenas pellentesque orci non urna facilisis id interdum massa aliquet. Etiam dictum, orci non egestas eleifend, nulla tortor tristique turpis, ut porttitor elit ante in est. Ut pretium urna at lacus auctor convallis. Curabitur mi risus, euismod nec pharetra et, viverra dictum justo. Phasellus accumsan luctus libero, nec sollicitudin augue tristique non. Vivamus vulputate metus quis arcu varius ac aliquet libero elementum. Suspendisse consequat feugiat lacus ut pellentesque.
<br/><br/>
Proin lacus lorem, rhoncus sit amet tincidunt semper, convallis eu quam. Sed bibendum rutrum velit, imperdiet ultrices odio condimentum a. Donec ac justo turpis, quis laoreet massa. Phasellus eu massa nisl, et laoreet quam. Suspendisse potenti. Maecenas odio risus, euismod interdum egestas vel, interdum non diam. Nunc luctus adipiscing orci pulvinar gravida. Quisque dapibus enim in mauris imperdiet vel vehicula lorem imperdiet. Aenean vel ligula libero. Maecenas sit amet tortor eu dolor rutrum hendrerit at a orci. Aliquam erat volutpat. Vestibulum eu vehicula est. Vestibulum non metus quam, eu molestie magna. Duis venenatis malesuada tincidunt.
<br/><br/>
Nam sed metus lacus. Sed ac sapien tellus. Maecenas eleifend sodales diam sit amet aliquam. Quisque libero justo, egestas at scelerisque nec, dictum et libero. Quisque sollicitudin, dui sed lobortis viverra, risus ante condimentum urna, hendrerit varius augue tellus non purus. Maecenas id erat lorem, vel mattis mauris. Morbi sed elit ut metus laoreet congue. Phasellus ac urna diam. Duis faucibus varius magna, eu lacinia nisl tempor id. Ut facilisis quam et augue consectetur at vestibulum risus imperdiet. Curabitur sed tellus ante, et ultrices diam. Duis sem leo, venenatis quis ornare in, viverra et enim.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
</div>
CSS
#header{ border: 1px solid black;background-color: #888888;
height: 30px;
position: fixed;
top: 0;
width: 100%;}
#right{position:relative;right:0;}
#container{margin-top:40px; width: 2000px;}
.link{ border: 1px solid red;
color: yellow;
font-weight: bold;
padding: 1px;
position: absolute;
right: 3px;
top: 3px}
check this code at fiddle also
http://jsfiddle.net/2MZwr/14/
Let me know if this is not fix your problem.
I think you should use position: absolute instead of fixed. Note that the positioning will be relative to the first element that you have given a position:relative. So you could write:
body { position: relative; }
ul { position: absolute;
top: 20px;
right: 0px;
/* if you want the content to overlap everything, you should set the z-index */
z-index: 1;
}
The reason that your first try with absolute positioning didn't work out is probably because you didn't set a relative element, in wich case it will be relative to the browser window. So if you scroll, the links will move;)
If you can alter the HTML a bit, you can achieve the desired effect by simply putting the top links in the first root-level div, and everything else in the second root-level div.
<html>
<head>
<style type="text/css">
#foo{position: absolute; height: 20px; border:2px solid red; background: gray; top:0; right: 0;}
#bar{overflow:auto; width:100%; margin-top:24px;}
</style>
</head>
<body>
<div id="foo">Links Links Links Links Links Links Links Links Links Links Links Links</div>
<div id="bar"><img alt="The rest of the page goes here" src="https://www.google.com/images/nav_logo99.png" width="2000"></div>
</body>
</html>
Simple answer: *"To not make it move around when scrolling, you need to define the vertical position. FIXED expects both horizontal as well as vertical positioning. So you have the option to go
position:fixed;
right:0;
top:0;
or
position:fixed;
right:0;
bottom:0;
Then, you'll need z-index to make sure that - when things start overlapping - the correct div/layer/whatever is the topmost and therefore the visible one, hiding the lower z-index underneath it.
An alternative layout option...
... would be to give the parent container/element a
position:relative;
and then position the child elements as you like using
position:absolute;
top:0;
left:0;
or whatever position you want to give them.