I'm working on a responsive design where the logo needs to be positioned top/center of the page and overlaying the content beneath it.... http://reversl.net/demo/ I can get this desired layout by giving the logo an absolute position
position: absolute;
top: 0;
left: 50%;
margin-left: -98px; /*--half the width of the logo--*/
For best standards....is there any reason why I shouldn't take this approach? From looking around folks tend not to favor using absolute positioning. Would it be better to give the logo a negative top margin and auto left/right margin? The main thing is that the logo remains top center when the media query breakpoints kick in..
Whether absolute positioning is appropriate depends on whether the positioned element should affect positions of other elements (or to be affected by them). If not, absolute positioning is perfectly OK.
Absolute positioning is absolutely acceptable.
Absolute Positioning is cool. forever people were using a 960px width layout and absolutely positioning everything in a relative wrapper... this worked well back then. But that was before we started designing responsively. When people say "AHHH NO absolute positioning," this is what they are talking about. But absolute positioning is great for all sorts of rad stuff... like what you are doing. that is the way to go about it... I am also a really big fan of fixed positioning... and it seems so be all working on ioS devices now !!! YAY !!!
Related
How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.
For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.
I am trying to position an element on my page but would like it to be positioned both relatively and absolutely (stay with me, I know that doesn't make sense).
What I really want is a way of positioning this element that takes a hybrid of functionality from both the relative and absolute positioning.
So in my case I want this element to be positioned say 10px higher than its initial position, for this relative works fine, but we get a nasty white space where it should have been. So as-well as moving it up 10px relatively I would also like it to come off the page like an element that has been absolutely positioned.
Now before you say "just use absolute and position it there" I have quite a large page and by positioning something like this I would use huge number that would be thrown way out if the screen size changes.
So, to summarize I want to place this relative to its original position but also pull it off the page like absolute positioning, is this possible?
Perhaps this'll help?
#myElem {
position: relative;
top: -10px;
margin-bottom: -10px;
}
This'll move the element 10px up, and also move its lower border 10px up, eliminating the space below it.
I'm trying to hack the normal behavior of a position: absolute; element so that it takes up the height it normally would and plays nicely with the elements below it.
Normally I might do a quick and dirty margin-top: XXpx on the element below it, but I'm using a responsive CSS framework and that breaks down as the viewport changes. I need the absolute positioning to extend one section (white box) the full width of the page, where the other section fit within a wrap in the center.
What is the proper way to do this?
Proper way to do this is use media queries.
Check the following links:
Mediaqueri.es
Developer.mozilla.org: Media queries
css-tricks.com: Media queries
Thanks
AB
I am using responsive framework 1140px. In the mobile version I have to fix the position of a logo but not have it overlap the content on scroll. Basically fix the position but don't fix the image on scroll, can this be achieved?
You want to use position:absolute
position:fixed fixes the element to the screen, so it will not move when you scroll (it's fixed to the window).
position:absolute fixes the element based on the closest ancestor that is not position:static, so it will move when you scroll the page (it's fixed to the page).
It appears that you want is position: absolute, the difference being that absolute images do not move while scrolling.
http://www.impressivewebs.com/absolute-position-css/
It's worth taking a look at this link in order to see the differences between relative, absolute, and fixed positioning:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Please look at this fiddle:
http://jsfiddle.net/dyv88/16/
On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.
All more recent browsers, it does not.
Can someone please explain?
And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?
If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one.
Do position: relative on one of the parents to fix this. Or position the table relative.
I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.
jsFiddle Demo