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
Related
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How to center a "position: absolute" element
(31 answers)
Closed 1 year ago.
I'd like to show a big warning in the center of the screen when our backend sends back an error message.
Since I don't know how long that error message can be, I do not want to be restricted by setting a static size for the div, but I want it to grow if the content within it grows.
I'd like to solve this with pure css.
Ideally, I'd use something like calc, that would say: the distance from the top is 50vh minus half of the height of the div.
Currently, my css looks like this:
.error{
float:right;
position:absolute;
width:80vw;
left:calc(10vw);
top:calc(50vh - 100px); // should be something like calc(50vh - (.error.height / 2))
}
So my question is: am I thinking in the right direction? Can I request the height of a div with calc? Is there another solution?
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
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:
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?
This question already has answers here:
CSS: Special Fluid Layout Problems
(5 answers)
Closed 3 years ago.
I have the following test code to play around with:
http://jsfiddle.net/b6QFY/1/
I want the "left" element to be fixed and the "right" element to be fluid within the parent container so that it will grow and shrink as the browser width changes, and not wrap. Seems so simple, but have issues getting something to work.
This is what I meant to link to. (I should be getting to bed.)
The core of it:
Padding-left on the container element, absolutely position left element with negative left-margin, and width of 100% on the right element.
To my knowledge this should work in most browsers, except IE6 and possibly 7.
you can use display:inline-block;
this article has will help http://www.tjkdesign.com/articles/liquid/3.asp
Absolute positioning the left element might be the more comprehensive answer when other things come into play, such as container borders and backgrounds and organic growth of the right element.
See my previous answer.