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.
Related
I was following a tutorial https://www.youtube.com/watch?v=l6nmysZKHFU
can anyone help me with the css at the 8:10 he tell us the need to create the main tag so that the object that we create afterward don't overlap
I understand that i want to know is there any better way to do that .Can we do some tweak in the toolbar css to make it fixed so that other element will not overlap in the toolbar
Instead of fixed position, you can use position: sticky; with top: 0;. Then you won't have to add any other element to avoid the overlap.
Position Sticky
This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.
I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should not be < 0 of the visible top of the browser window. Is that even possible with CSS and the better browsers?
Here is my definition of the sidebar:
div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}
Here is the element I would like to keep inside the visible part of the screen:
div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}
The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.
<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>
I think you need
position:fixed;
So the element will be positioned relatively to the window, so if you scroll it is always visible.
Demo: http://jsfiddle.net/mJubt/
Moreover, if you want to set !important to a value, use top:0!important instead of top:!important 0.
And when you have 0px you don't have to write the unit, you can use just 0.
if you use top in CSS you should make sure that the element's position is not static (default) but absolute, relative or fixed. So, top:0 in this case is not working. And if you do change the position to either of those it would behave in different ways:
if it's fixed the element would be position relative to the window
if it's relative or absolute it would be position zero pixels from the top of the closest element in the DOM with a position different than static.
If the contents of the element above #navsoc has a flexible height you can't make it respect it's position and at the same time not move on scroll.
You need Javascript to achieve that.
The first part is a bit off topic back I think it is good to know it!
Here you have the fiddle.
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 !!!
I can't work out how to stop an absolutely positioned element at a particular point.
On this page you will see the words "Get me on your team" these words and the robot are absolutely positioned so they are always hard right on the screen. What I am trying to do is when the screen is re-sized to become more narrow I want to stop it overlapping the mac image. I have tried adding margin-left: 900px; but it has no effect when making the screen smaller. Does anybody know how to stop the words and robot at a particular point when making the browser more narrow?
I think you want to set a min-width on the containing element.
body {
min-width: 1024px;
position: relative;
}
also set position relative so that the robot is positioned absolute to the body in stead of to the window.
I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.