I have a container element with long content which is scaled:
.container {
transform: scale(0.9);
}
inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page.
Do you now some specifics on applying positioning on children of scaled elements?
DEMO: http://labs.voronianski.com/test/scaled-positioning.html
Add to .wrap:
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.
See: When using CSS Scale in Firefox, element keeps original position
Related
I have a div that gets taller when a user selects a certain checkbox.
The default behavior of this div was that when the checkbox is selected the div grows equally at the top and bottom. The top becomes higher and the bottom becomes lower. I would like the top of the div to be fixed and only allow the bottom to become lower so that the content of the div that is present regardless of the checkbox state does not move when the user selects or deselects the checkbox.
I found that adding this styling to the div does the trick.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
}
However, this also moves the div to the left side of the page. I need it to be centered. The div should be a fixed width unless thear window is narrower than that width in which case the div should become narrower.
If I change the position attribute to relative, then the div is centered properly as described above, but the top is no longer fixed.
How can I make the top of the div fixed, while at the same time satisfying the width requirement set forth above?
.fixed-top {
position: fixed;
left: 50%;
text-align: center;
margin-left: -120px;
top: 0;
width:240px;
}
Try this code....
So, this is how I would solve this
First, please make sure the parent element of the div have its own width (in your case, width:100%;) and have any kind of position (e.g. position: relative;) otherwise this trick wont work.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
// add this
left: 50%;
transform: translateX(-50%);
}
The trick is to set the div's left attribute by 50% of its parent element width, then move (translateX) it back (-50%) by half of the div width.
You can also use this trick on top attribute too.
top: 50%;
transform: translateY(-50%);
or use this to center both top and left
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
EDIT:
If you want the div position attribute to be relative, you can use
.fixed-top {
position: relative;
// instead top, we use margin-top
margin-top: 50px;
width: 400px;
// add this
margin-left: auto;
margin-right: auto;
}
I hope this helps ;)
I am trying to vertically center an image. I know how to do it with absolute position, but the problem with this is that other elements around it collapse into it.
This is how I vertically center using absolute position:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I'd like to use relative position, but when I change absolute to relative, it does not work. Anyone have any suggestions to vertically center using relative position? I could do padding/margin top until its centered but I would like the css to generate it centered in case the image changes height when responsive.
This is the HTML and CSS, its pretty simple:
<div class="header-main-left">
<img src="/images/header_logo.png" >
</div>
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left img {
position: absolute; //I want this to be position relative
top: 50%;
transform: translateY(-50%);
}
position:relative does not take an element out of the flow, it just allows you to change its render location relative to where it would've been rendered had it not been positioned.
position:absolute takes an element out of the document flow. This causes the elements origin to be the upper left of the nearest ancestor element that is not position:static.
If you need to set your particular element to position:relative, but need its initial position to be centered in its parent, add a wrapper element and move the centering to that wrapper.
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left .logo-wrapper {
position:absolute;
top:50%;
height:100%; /* let the relative top and transform on the img work */
}
.header-main-left img {
position: relative; /* I want this to be position relative */
top:50%;
transform: translateY(-50%);
}
<div class="header-main-left">
<div class="logo-wrapper">
<img src="/images/header_logo.png" >
</div>
</div>
Try to use the
display: table-cell;
Than the vertical align set to center
Or use tables.
Or use Jquery that add margin-top on the element equally to the half of its height
So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>
How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:
http://jsfiddle.net/uoq916Ln/1/
The solution on how to avoid mix-blend-mode affects children:
Make child element position relative, give it a width and height;
Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;
Live example
html
<div class="bkdg">
<div class="blend">
<div class="inner">
<h1>Header</h1>
</div>
</div>
</div>
css
.blend {
position: relative; /* Make position relative */
width: 100%;
height: 100%;
}
.blend::before { /* Apply blend mode to this pseudo element */
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: green;
mix-blend-mode: multiply;
}
.inner { /* This is our content, must have absolute position */
position: absolute;
z-index: 2;
}
h1 {
color: white;
}
I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.
There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).
Check out this page for examples
someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.
html
<div class="bkdg">
<h1>Header</h1>
<div class="blend">
</div>
</div>
css
.blend {
background-color: green;
mix-blend-mode: multiply;
width: 700px;
height: 35px;
}
h1 {
color: white;
position: absolute;
top: -15px; left: 10px;
z-index: 1;
}
https://jsfiddle.net/jckot1pu/
It’s impossible to remove an element’s mix-blend-mode from its children.
MDN says that mix-blend-mode:
sets how an element's content should blend with the content of the element's parent and the element's background
To achieve the desired effect, place the child in a separate stacking context and make sure it renders on top of the element with mix-blend-mode set.
You need two things to make this work:
Make sure that your opaque content (your text) is not a child of the element that sets the background and the blend mode. For example, with CSS Grid Layout.
Make sure the text is rendered over, and thus not affected by, the element that sets the background and the blend mode. Setting mix-blend-mode on your background will create a stacking context for it, and you may need to give your content its own stacking context to ensure it gets rendered above it.
Position your elements with CSS Grid:
define a grid container with one auto-sized grid area
place both the background element and the text element into that one grid area (so that they overlap)
let the text element dictate the size of the grid area
have the background element stretch to the size of the grid area, which is dictated by the size of the text element
Then, set isolation: isolate on the text element to ensure it gets rendered above, and not under the background element.
A working example
.container {
display: grid;
grid-template-areas: 'item';
place-content: end stretch;
height: 200px;
width: 400px;
background-image: url(https://picsum.photos/id/237/400/200);
background-size: cover;
background-repeat: no-repeat;
}
.container::before {
content: '';
grid-area: item;
background-color: seagreen;
mix-blend-mode: multiply;
}
.item {
grid-area: item;
isolation: isolate;
color: white;
}
h1,
p {
margin: 0;
padding: 10px;
}
<div class="container">
<div class="item">
<h1>HEADLINE</h1>
<p>Subhead</p>
</div>
</div>
An important note if you're using the excellent pseudoelement ::before/::after solution posted by Rashad Ibrahimov.
I found that I had to remove z-index from the parent element and apply it only to the pseudoelements and child elements before mix-blend-mode: multiply would work.
For example
#wrapper {
position: relative;
}
#wrapper .hoverlabel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* z-index: 90; Uncomment this to break mix-blend-mode. Tested in Firefox 75 and Chrome 81. */
}
#wrapper .hoverlabel::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
z-index: 90;
background-color: rgba(147, 213, 0, 0.95);
}
I have a white page with only a 500x250 textbox and an image. The page is fluid.
I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:
.bottom-right { /* used to fix the image to the bottom of the screen */
bottom: 0;
right: 0;
position: fixed;
}
#content {
margin-left: auto;
margin-right: auto;
margin-top: 50%;
width: 500px;
height: 250px;
position: relative;
}
When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.
If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.
See this working Fiddle Example!
CSS
#content {
width: 500px;
height: 250px;
position: absolute; /* this is the key */
z-index: 1; /* this is the key */
left: 50%;
top: 50%;
margin: -125px 0 0 -250px;
}
CSS position:absolute;
What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.
CSS z-index:1;
What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).
See the CSS absolute and fixed positioning - W3C Wiki for further details.
Two options I can think of:
Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.