Maybe easier to the the site in progress - http://www.roadsafetyforchildren.co.uk/
I want to position the yellow text at the bottom of the page over the blue bar (which is an img).
I have a div that has position:relative;, within that is another div that has position:absolute;. I thought by doing that when you assign a top position to the absolute div it will take the top of the relative div as it's starting point? Mine takes the top of the screen as it's starting point, hence the massive top position.
Obviously I want the yellow text to move with the the blue bar depending how tall/wide the page is.
As far as I can see using position absolute is the only way to solve this?
Maybe I'm not understanding the whole notion of putting a absolute positioned div inside a relative one!
Your #footer div is absolutely positioned but it is not within any relatively positioned element. The only relative element I see is #actual-content, which is a sibling of #footer. If you place an absolutely positioned element WITHIN a relative element then it acts as you described.
The absolutely positioned div must be inside the relatively positioned div. That doesn't seem to be the case on the site you've linked.
Related
I am trying to make an HTML DOM slideshow creator, that inserts text, images, etc. into slides for presentations. The main browsers in mind are the Nintendo DSi and 3DS browsers, but I would like functionality with computers as well, meaning that I AM using CSS percentages.
But here's the catch: An HTML span element has a relative positioning of top 100% and left:90%.
The left position is fine--the top position is not...I don't understand why, but the span is being displayed COMPLETELY outside the element from the top positioning.
Check this out for yourself here.
"Slide 1" is supposed to be ABOVE the bottom border for the light gray div I have. Why is this outside when the positioning should be relative to that div?
I've always been so confused with CSS positioning...Could someone please figure this out for me? This is getting frustrating. By the way, what your looking for is "Slide 1" outside the HTML div.
It is "being displayed COMPLETELY outside the element" precisely because of the top: 100%. That is telling it to move the span 100% the height of the container, which of course since it started at the top of the container, it puts it just past the bottom of the container. Note that relative positioning is not done "relative to that div" as you stated, it is actually relative to that span (you may want to do some reading on that). However, when using percentage offsets, it does calculate its offsets in relation to the size of the container.
Since your div.slide container is itself position:relative, then I believe what you want is to set your span to position:absolute and instead of doing a top positioning, do a bottom: 0 which will place it directly on the bottom of the div you are trying to place it on the bottom of. You can keep your left: 90%.
I know that I can hide an element without removing the space it would occupy by using visibility: hidden. What I want to do is the exact opposite: I want to render the rest of the page as if the element wasn't on the page, but keep the element visible.
The reason I'm asking is because I have a centered 950px-wide layout to which I want to add a little box on the left side of the screen. It would look kinda like this:
Right now I have a <div> that holds the side box as the top element in my 950px page wrapper, which is also a <div>. To the side box I've applied position: relative and left: -200px (box width) to move it to the side, but that still leaves me with the main content being pushed down. Am I approaching the problem correctly? Is there a logical way to remove the vertical space that was left behind by the side box?
Just use position: absolute;. The element will no longer be part of the document flow, and you can position it relative to its closest non-statically positioned ancestor.
Position relative will still occupy the space. Try position:absolute; It will place the element absolutely inside its parent but above all of its siblings.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
I'm not sure if I fully understand the difference between these two.
Can someone explain why I would use one over the other and how they differ?
You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse.
If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, left and right settings.
With relative positioning, the element will still occupy its original space as when positioned statically. That's why nothing happens, if you just switch from static to relative position. From there, you may then shove it across the surrounding elements.
With absolute positioning, you completely remove the element from the (static) document flow, so it will free up the space it occupied. You may then position it freely - but relative to the next best non-statically positioned element wrapped around it. If there is none, it'll be anchored to the whole page.
top is for tweak an element with use of position property.
margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Margin applies and extends / contracts the element's normal boundary but when you call top you are ignoring the element's regular position and floating it to a specific position.
Example:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
Means the element will begin displaying html at the 50% height of its container (i.e. the div displaying the word "content" would be displayed at 50% height of its containing div or html node directly before div#some_element) but if you open your browser's inspector (f12 on Windows or cmd+alt+i on mac) and mouse over the element you will see it's boundaries highlighted and notice the element has been pushed down rather than re-positioned.
Top on the other hand:
#some_element {top: 50%}
Will actually reposition the element meaning it will still display at 50% of its container but it will reposition the element so its edge starts at 50% of its containing element. In other words, there will be a gap between the edges of the element and its container.
Cheers!
The top property is a position property. It is used with the position property, such as absolute or relative. margin-top is an element's own property.
from bytes:
"Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter. 'top' displaces the element's margin edge from the containing blocks box, such as that same piece of paper inside a cardboard box, but it is not up against the edge of the container."
My understanding is that margin-top creates a margin on the element, and top sets the top edge of the element below the top edge of the containing element at the offset.
you can try it here:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
just replace top with margin-top to see the difference.
This is my understanding...
TOP: it defines the position of the element wrt its own elements or other element i.e in case of relative top refers to compare with its own element whereas in fixed top refers to compare with viewport.
Margin_Top: it always refer to its own elements that adds an offset(outside) to its border