This question already has answers here:
Position absolute with Left:100% , Child element goes out of the parent continer
(4 answers)
Closed 2 years ago.
Let's say I have some code like this:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b {
position: absolute;
top: 30%;
right: -33px;
}
.c {
position: absolute;
top: 50%;
right: -88px;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
If you run the snippet you'll see the desired behavior, where both b and c are positioned on the right edge of the a element.
The only issue I'm having is that on my website b and c have dynamic contents (I don't know what they'll be ahead of time). Is it possible to somehow modify the right property of both b and c such that I don't have to hardcode the value in and they will still be positioned on the outer edge of a?
You can use:
left: 100% or
right: 0 and transform: translateX(100%)
Example:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b, .c {
position: absolute;
right: 0;
transform: translateX(100%);
}
.b {
top: 30%;
}
.c {
top: 50%;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
I'd probably go a step further and wrap .b and .c with another element so that you can get rid of hardcoding top too.
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.d {
position: absolute;
top: 50%;
right: 0;
transform: translate(100%, -50%);
}
.c {
margin-top: 1em;
}
<div class="a">
<div class="d">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
</div>
Related
I wonder if I can appear block absolute above block relative which is a later element
Here is my code:
Purpose is to display child 1, 2, 3 (block absolute) above wrap (relative).
Probleme is from block wrap which appear after block absolute.
Do you have any idea for this? Thank you !
.wrap {
border: 5px solid lightcoral;
padding: 1rem;
height: 50vh;
> style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
body {
margin: 2rem;
}
* {
box-sizing: border-box;
}
.child {
background: darkorange;
}
<div class="child child-1">
<style contenteditable>
.child-1 {
position: absolute;
top: 0;
left: 0;
}
</style>
</div>
<div class="child child-2">
<style contenteditable>
.child-2 {
position: absolute;
top: 30%;
right: -25px;
}
</style>
</div>
<div class="child child-3">
<style contenteditable>
.child-3 {
position: absolute;
bottom: 5px;
left: 10px;
}
</style>
</div>
<div class="wrap">
<style contenteditable>
.wrap {
position: relative; // problem is here
background: violet;
}
</style>
</div>
I tried z-index. But it doesn't work.
**Update: Problem solved. I put all child in relative element. And use z-index: 999 for child's element.
I'm trying to achieve the following:
I have an image in the background and a moving element in the foreground. I want to show the foreground element only while it's overlapping the background element. In the snippet below, the globe represents the background element, and the red square is the foreground element.
Here is a demonstration what I want it to look like:
The first things that came to mind were the css clip-path and mask-image properties, but I couldn't really get it to work.
Thanks in advance!
.world {
position: absolute;
top: 100px;
left: 100px;
}
.world img{
width: 300px;
height: auto;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 75px;
top: 200px;
}
<div class="world">
<img src="https://png2.kisspng.com/sh/bfd975773964bd26a28b9eecfb96b970/L0KzQYm3U8I6N5hwj5H0aYP2gLBuTgdwep1pRdl1b3LoPbTzigAuaaN5RddqcoTrPbTokwRwd58yTdNrZETkdom4VvU3QWczUKgBMEK2R4a4VcIzO2Y5UaUBMEm2SHB3jvc=/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696.8660237515223549360938.png"/>
</div>
<div class="testelement">
</div>
Here is an idea with mask. Simply use the same image inside the mask on the container where the size is defined by the image. Then make the red square inside that container:
.world {
position: absolute;
top: 100px;
left: 100px;
width:300px;
-webkit-mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
}
.world img{
width: 100%;
display:block;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: -20px;
top: 150px;
transition:1s all;
}
.world:hover .testelement{
left:20px;
}
<div class="world">
<img src="https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png">
<div class="testelement">
</div>
</div>
I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks
Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>