This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
Given the following example, https://jsfiddle.net/mzv4nxo8/,
I want to position the image in the top right corner over the div rectangle, like I've shown in the example. This works fine as long as the div container does not overflow.
However, when you start scrolling, the image moves as well since the image is set to position: absolute. I want it to stay "anchored" to its initial position (i.e. before you start scrolling). The text inside the div rectangle needs to stay in the center position.
How do I accomplish that?
position: absolute positions the element according the the closest parent that has the position property different from the default value static.
Add this to your css and it will work
div {
position: relative;
}
I guess you can also use your .content selector
Related
This question already has answers here:
How to not display child div when outside parent div border
(3 answers)
Closed 3 years ago.
I am trying to animate move (up or down) a child div out of the view. But while doing so I want to use the parent as a border so that it disappears as soon as it crosses the parent border. What I mean is:
this is my screen
when the child leaves the parent this happens
but what I want is
and then the child disappears. How can I accomplish that?
add this to the parent div
overflow: hidden;
This question already has answers here:
Is position: static identical to position: relative, with no other properties specified?
(2 answers)
Closed 6 years ago.
I'm learning and studying the HTML/CSS codes of some of the most popular websites, and I just found that in most of them there is the "position:relative" property without the usual top, left, right, bottom properties.
Does this affect the page flow in some way, or it acts like the static property?
Short answer: position: relative becomes a positioned element:
This would mainly affect only it's child elements, with position: absolute relative to this element now, not the HTML. (Thanks Michael_B)
width: xx% is also relative to this parent element if there is not fixed widths along the hierarchy.
z-index now works with this element.
When you define absolute position for a element. The position it will base on the closest relative parent. If there's no relative parent, the position will base on the window page.
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 6 years ago.
I was trying to vertically align an h1 tag that is on top of a picture.
I used position:relative, and top:50% and I don't understand why it didn't vertically aligned it even though I used top:50%.
So this time I added transform: translateY(-50%); and for some reason it is now vertically aligned.
Can somebody please explain to me what translateY(-50%) does?
First of all you need to understand the position relative. as per w3school "An element with position: relative; is positioned relative to its normal position."
so percentages in top,left etc will not work. if you give it in px ie top:10px;
it will take position from its current location.
and for your question about translateY();
As per w3school "The translate() method moves an element from its current position"
TraslateY() moves the the element vertically down, and negative value will move it opposite to top.
for further reading you can check this link http://www.w3schools.com/css/css3_2dtransforms.asp
This question already has answers here:
Position Relative vs Absolute?
(10 answers)
Closed 7 years ago.
Can any one explain me in detail about relative and absolute in CSS. All the descriptions tells me that absolute can be placed any place I want (that means I can use top, bottom, etc). I can achieve the same with the relative as-well. I was just checking a small example in relative and absolute in W3schools, wherein relative occupies the whole line but absolute doesn't. I am confused with this.
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
Can anyone explain me with a perfect example about their difference?
I think you can get the better understanding to Css Positioning from this source
Quick Summary of the 4 Kinds of Positioning:
Static - Static positioning is the default, it is what happens when
you set no positioning. The element (the tag and its content) stays in
normal page flow.
Relative - The element's box is still part of the page flow, and but
its location is changed vertically and/or horizontally relative to its
own normal position in page flow.
Being part of flow (being in page flow) means that an element will
push later elements in flow further down, and be pushed further down
by elements in flow that are before the current element.
Example of Relative CSS positioning:
.fromorig {position: relative;
top: 200px;}
Fixed - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal
position of the element relative to the browser window. Additionally,
the fixed element's contents will NOT scroll away like normal HTML
page contents do, they will stay in their current position in the
browser window. Fixed positioning was not supported by IE until
version 7.
Example of Fixed CSS positioning:
.nevermove {position: fixed;
top: 200px;
left: 200px;}
Absolute - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal
position of the absolute element relative to the element it is inside.
Additionally, the absolute element's contents will scroll vertically
(and/or horizontally) like normal HTML page contents do.
Example of Absolute CSS positioning:
.moveit {position: absolute;
top: 200px;
left: 200px;}
see demo at:
CSS Positioning With example
This question already has answers here:
Move onmouseover images to the left?
(2 answers)
Closed 5 years ago.
Here is my page: http://www.ostmoconstruction.com/portfolio.php
If I hover over the first image in each row, the resulting image is the full size of the div and therefore, pushes the second image outside of visibility.
I would like the same thing to happen when I hover over the second image. Perhaps it would push the first image outside the left side of the div layer and display only the second image. I tried setting the positioning to absolute onhover and left: 0; and this seemed to work, but also seemed unstable and left the title of the first image in tact (sometimes conflicting with the title of the second).
Any ideas?
I have the one solution Conflicting Title you can try :
p a {
background:#FFFFFF;
}
I ended up making the image's position absolute and wrapping it in a relatively positioned div layer then gave both negative left margins to align then correctly. The absolute positioning allowed my to bring it to the left and the relative positioning allowed my to push the other image outside of the container div. More info here: Move onmouseover images to the left?