You are developing an HTML5 page. The page includesthe following code.
The inner paragraph must be exactly 15 pixels from the top left corner of the outer paragraph. You setthe left style for the inner paragraph to the appropriate value.
You need to set the position property of the inner paragraph.
Which value should you use?
A.
absolute
B.
static
C.
fixed
D.
relative
relative is the answer… i tested it well
In my opinion it should be relative
yes relative, because absolute will count pixels for top left corner of the whole page, but not from the outer paragraph
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :
@Steve, your comment is true for DIV, not for P
For example, with the code below, the normal flow of elements would position div1 on the page first then div2 next to it, div3 next to div2, and div4 next to div3, and all four div elements would be placed inside the article element:
One
Two
Three
Four
These blocks all have the default CSS position value of static. You can take any of these blocks out of the normal flow by changing their position property to relative, absolute, or fixed.
If you set position to relative, you can use the top, right, bottom, and left properties to position the block relative to the position it would have been in. All other blocks stay in the same position they would have been in, as if the block was statically rather than relatively positioned.
position: relative;
top: -10px; // Top edge of block moved up 10 pixels from normal
left: 10px; // Left edge of block moved right 10 pixels from normal
If you set position to absolute, the block is taken completely out of the normal flow and positioned relative to the edges of its containing block. In the following styling, if div2 were absolutely positioned, div3 would be positioned next to div1 in the normal flow.
position: absolute;
top: 25px; // Top edge of block 25 pixels down from top edge of container
right: 10px; // Right edge of block 10 pixels left from right edge of container
Hi Jeff and others
Can you please tell me which one is the correct one.Relative or Absolute.I am little confused now.
The correct answer is A.
You need to use absolute to be exacly 15 pixels from the outer .
If you use relative you are going to be 15 pixels from its normal position.
Don’t you trust me? Just make a test:
p#inner{
position: absolute
top: 0px
}
You will see the inner in the same place as the outer , so using 15px the inner will be exacly 15px FROM outer .
doh, need more info, too much assumptions.
wtf is ‘left style’ and ‘appropriate value’?
i know what to stick into ‘appropriate value’ to move it by 15px with relative, absolute, fixed and static position.
very stupid question.
and p tag inside p tag..
i think absolute 🙂 but i m eating ..so maybe im not concentrate
http://www.w3schools.com/cssref/pr_class_position.asp
“Absolute: The element is positioned relative to its first positioned (not static) ancestor element”
“Relative: The element is positioned relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position”
The answer sais that “The inner paragraph must be exactly 15 pixels from the top left corner of the outer paragraph” so correct answer is Absolute.
+1
+1
Absolute it is…
https://developer.mozilla.org/en/docs/Web/CSS/position
Absolute is correct
I created an example http://www.w3schools.com/code/tryit.asp?filename=F0VIK9HXEITO