The form at the top of this page: http://kgshowroom.com/test/builder-test.html is supposed to go under title "Testing the Builder Thing" but no matter where I put the "header" "div" or "article" tags around the iframe for the form, it doesn't budge. I tried looking into the css for it, but I must be missing something. And I know it's gotta be a simple something!
Any ideas?
You have the CSS value position: absolute; set on the form's parent iframe. That removes it from the normal document flow, which prevents it from affecting the positions of any sibling elements (i.e. it overlaps them instead of pushing them out of the way). It also makes the browser calculate the iframe's position relative to its containing block rather than its sibling elements (though only if used in conjunction with the top, right, bottom, or left properties). That, together with the CSS value, top: 0;, is why the iframe is stuck at the top of the page.
Changing the position value to relative will fix the problem. Deleting the top, right, bottom, and left properties might also work, but I'd try the relative positioning first. Look here for more info on CSS positioning.
Moving the <div id="FormLoginPage"> after the iframe seems to do the job with me in the DOM.
Related
I'm following a tutorial on how to build a website in dreamweaver (https://helpx.adobe.com/dreamweaver/how-to/make-website-pt6-web-links-navigation.html) However I'm trying to understand why a certain step in the tutorial works as it does.
I have an absolutely positioned element #navlink, here's it's position in the DOM structure:
nav
h2 #menulink
ul #navlink
nav
visually looking at the result, ul#navlinks gets removed from the page as per absolute flag, but instead of getting anchored next to the last positioned element, which is the html page (since no element above ul is positioned relative or otherwise) it jumps to the h2#menulink that is above it in dom.
I'm not sure if it's just a mistake in my code and that I am inedvertantly positioning the h2 or nav element in some way, or that I overlooked some other reason of why the document flow attachment point is being overriden, but I cannot find the mistake no matter how many times I go through the code.
This is a link to a full source code as well as the rendered page as I have it in jfiddle:
https://gist.github.com/anonymous/5d8bde1f196b919dab297560ff85b072
This is expected behavior. Your code is correct, and so is the browser. For absolute positioning, it is anchored "next to the last positioned element" horizontally only when left or right property is defined, and vertically only when top or bottom property is defined.
If there is no top, bottom, left or right defined for ul#navlink, it will be "removed from page", but positioned as position: static.
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
I'm trying to disable some portions of my html pages.
I read that you can use a transparent div with absolute position on top of your page to prevent clicking on elements beyond it, but is there a way to accomplish this only on a portion of a page (let's assume this portion is all contained in a div) without the use of absolute position?
Put position: relative on the div you want to disable, then add the transparent blocking div as a child of this div with position: absolute and top, bottom, left, right equal to 0.
If you are unable to put position: relative on the div you want to disable then it will be a bit more difficult as you need to compute it's dimensions and offset and then position the transparent mask as a child of the body and at the exact same position as the element you need to disable. JS frameworks (as jQuery) usually provide you with ways to determine a box's offset relative to the document.
Make a little 1px x 1px transparent image and save it as a .png file.
In the CSS for your DIV, use this code
background:transparent url('/images/transparent-bg.png') repeat center top;
Remember to change the file path to your transperant image.
I think this solution works in all browsers, maybe except for IE 6, but I haven't tested it.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:
body{
position:relative;
}
The image went to the bottom of the page.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
It could be <html>?
Set position: relative on that and see what happens.
Update - Straight from quirksmode
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.
position: relative: The position the block would take if it were not moved (i.e. if it had position: static).
position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo
position: fixed: The viewport (browser window).
Ok lets suppose you have the following:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.
PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.
Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.
If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.
I also don't really understand your question:
I was trying to absolutely position an
element at the bottom of the page (not
the viewport).
This put the image at the bottom of
the viewport over the existing
content. However, once I added the
following css rule:
body{ position:relative; }
The image went to the bottom of the page.
Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?
Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this:
body, html { 'css properties bladiebla' }.
So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)