Firstly I apologise for being very novice and, as a result, not knowing the correct terminology. I hope I can make myself understood but let me know if anything I say is unclear).
For various elements across my site (a blog/online magazine) I want to have fixed elements, but that are fixed within their own containers and relative to the other elements on the page (for example I want the blog logo to cover the top left of the scrollable post thumbnails on the homepage and, on the same page, a fixed element with social media links to be always covering part of the bottom right of the scalable post thumbnails). At the moment all I have managed is to fix an element relative to the outer edges of the page which obviously does not always position it over the post thumbnails in the same way every time.
Another similar issue is the sidebar on the post page. On this page I have a section with a container and two rows (left being the sidebar and the right being the rich text post). I want to have at the top of the sidebar, the first column, to be the logo and at the bottom of the screen (i.e. not the bottom of the page) another logo. When you resize the height of the browser window I want the two elements to always be at the top and bottom of that column.
I’d be so grateful for any help on this, even if it’s just to direct me to a post that explains things (I have had a look but I think I am restricted my lack of correct terminology etc.)
That is called “Absolute”. Fixed is positionned depending on the browser.
The rule for absolute positionning is :
An element is position:absolute depending on his closest positonned parent.
Every word counts. So to position the parent (or declare it as the reference), simply give it position:relative. It has no visual effect but now it’s a reference for all its Absolute childs.
I think this will help you to solve most of your issues. try this and come back with a Public sharing link if you can, if you need more help on this.
Thanks so much for you help on this and my other question. I’m still a little unsure about your terminology but will see what I can work out when I’m back home and get back to you if I need to bother you again for more help!
For your first question, I believe what you need to do is one of two things. What I would do is nest two divs inside the container that has the two elements (one fixed, one scrolling). For the logo div you would just put the logo in there and then put your elements in a div below it, set a specific height to that div, and set overflow to “scroll”. Another option is to take your logo and set it as a background image in the overall div, but that would cause the elements to scroll ontop of it, which I don’t believe is what you’re looking for.
For the second question, I’m not really sure I can address it without seeing it.
I should point out that my and Vincent’s approaches will yield different results. Absolute positioning is probably the more accurate answer to your question, but it will have your elements scrolling visibly underneath your logo. Mine will have the elements come to the border of the logo, then disappear beneath it.
You’ll probably want to play around with both approaches to figure out which you like best.
Also, playing around with different approaches is the best way to learn the terminology and figure out what all those confusing options do!