I have created the following markup (an example to demonstrate) with a CSS skew transform:
.wrapper {
height: 100px;
width: 200px;
position: relative;
background-color: orange;
}
.inner {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
transform: skew(30deg);
background-color: blue;
opacity: .7;
}
<div class="wrapper">
<div class="inner"></div>
</div>
The problem is that the inner div .inner is being position outside of the container .wrapper even though I set right to 0 because the inner div is skewed 30 degrees. How can I position the inner div with the right most part being at the same position? I could hard code the value of right, but it would appear differently with different screen sizes. If I set the overflow of the outer div to hidden, the right side would still be misaligned. I've seen this post which suggests using transform-origin and -webkit-transform-origin, which I set to right, but none of the solutions worked. What can I do?
You need transform-origin: bottom
.wrapper {
height: 100px;
width: 200px;
position: relative;
background-color: orange;
}
.inner {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
transform: skew(30deg);
transform-origin: bottom;
background-color: blue;
opacity: .7;
}
<div class="wrapper">
<div class="inner"></div>
</div>
Related
Using CSS alone, I am trying to perform a panning behavior on a div that's positioned absolute inside a parent div.
I ultimately want to change the width and height dynamically (zoom in and out behavior). I want to be able to pan (using scrolling) across the whole child div when the size is bigger than the parent.
The child div has bigger width and I expect to scroll to see all 4 edges of it. But, the scroll only happens to the right side and the bottom side. If I have some content in that div – which would be rendered in the top left corner of the div – I can't scroll to it.
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
font: 400 14px/17px 'Roboto';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
In this example, the child div has 200% in width and height. I can't scroll to see the left and top edges.
It's just not possible for an element to scroll further up than the top. Here's what you can do instead: give the container some padding so the child isn't off-screen.
.container {
height: 300px;
padding-top: 150px;
padding-left: 50%;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 200%;
width: 200%;
background: black;
opacity: .5;
color: grey;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
I'm not sure What you want to achieve. I presume you want to see the text:
I amend a bit your CSS:
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -25%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
color:red;
}
I change transform from -50 to -25 and add color:red. Text appears in the left top corner.
I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
As you can see from this fiddle:
http://jsfiddle.net/t1h3aauh/2/
I'm through a problem that I've never been before. I'm working with Drupal CMS and it generates a lot of the markup you need to style.
Given the use case, I have a MODAL box that are wrapped into a lot of divs and, like all MODALS, it need to be FIXED positioned. But, when I do this, the behavior is very much like absolute positioning. It get stuck in place and inherit all the .wrap div dimensions.
Thanks for the help.
Edit
The code:
HTML
<header class="sticky">log and menu</header>
<main>
<section class="test">
<div class="wrap">
<div class="myEl">
<!--HERE BE SOME SCROLLABLE ELEMENTS-->
<div.class="iWannaBeScrollable">i'm scrollable</div>
<!--HERE BE THE FIXED ONE-->
<div class="modal">as you can see, this should be FIXED, but appears to be stuck into the parent.</div>
</div>
</div>
</section>
</main>
CSS
body{
margin: 0;
padding: 0;
}
.sticky{
float: left;
position: fixed;
height: 40px;
width: 100%;
background-color: green;
left: 0;
top: 0;
z-index: 10;
}
.wrap {
background-color: #333;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: auto;
max-width: 1200px;
float: left;
position: relative;
left: 50%;
}
main {
height: 1535px;
width: 100%;
float: left;
position: relative;
.test {
width: 100%;
height: auto;
padding: 72px 0;
float: left;
position: relative;
&::before{
content: "";
width: 100%;
height: 82%;
top: 21%;
background-color: #fafafa;
position: absolute;
}
.myEl{
float: left;
position: relative;
height: 300px;
width: 100%;
.modal {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(255,0,255,.5);
left: 0;
top: 0;
z-index: 100;
}
}
}
}
Why is there
transform: translateX(-50%);
on the .wrap element?
I think thats causing your problem...
IIRC: In my Drupal days, anytime you needed to fix an element, you wanted to call the top most parent.
So in this case, you would want to apply postioned:fixed it to .wrap.
.wrap{
position:fixed;
}
Here's why:
You are styling Modal with the fixed, so it is staying fixed within it's parent. You're parent/grandparent is styled as position:relative. Which makes .wrap and .myEl scrollable, while the modal is fixed within the scrollable div.
This makes it appear as if it is position:absolute;
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
i have div area which is devided in to 4 equal parts, like the one atached.
now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.
I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed
can anybody share a sample for styling this.
You can solve it this way:
HTML:
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="overlay"></div>
CSS:
.area{
float: left;
width: 49%;
height: 300px;
border: 1px solid black;
}
.overlay{
width: 200px;
height: 100px;
background-color: blue;
clear: both;
position: absolute;
bottom: 30px;
margin: -100px;
left: 50%;
}
Please note that I have used hard coded example values. The actual values depends on which context the markup is in.
Without your code it's hard to figure what's not working.
If I understand what you want this is what I would have done:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="overlay"></div>
</div>
css:
.container {
position: relative;
width: 600px; /* use the size you want */
height: 400px;
}
.container div {
position: absolute;
width: 50%;
height: 50%;
}
.container .block1 { top: 0; left: 0; background: pink; }
.container .block2 { top: 50%; left: 0; background: red; }
.container .block3 { top: 0; left: 50%; background: green; }
.container .block4 { top: 50%; left: 50%; background: blue; }
.container .overlay {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 30px; /* distance from the bottom */
z-index: 1;
background: yellow;
}