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.
Related
Hello i'm stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?
By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:
/* Solution */
.item { transform: skew(-15deg) } /* skew */
.item .content { transform: skew( 15deg) } /* reset */
/* Just eye-candy */
.wrapper { display: flex; gap: 0.5rem }
.item { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }
.item:hover { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
<div class="wrapper">
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
</div>
You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
}
<div class="losange">test</div>
EDIT:
If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
background-color: #eeeeee;
z-index: -1;
}
<div class="losange">test</div>
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>
I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!
Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>
I have some issues with div sizing when I resize browser window. I want child divs always remain inside the parent div and decrease in size proportionally to parent div when browser window resizing. I guess it should be a javascript but I dont know which one exactly and how to use it. Any advice will be appreciated!
#parent
{
position: fixed;
width: 100%;
height: 11%;
background-color: white;
left: 0;
}
#child1
{
left: 100px;
position:absolute;
}
#child2
{
position: absolute;
left: 700px;
margin-top: 15px;
font-size: 1.5em;
}
<div id="parent">
<div id="child1">
<a> <img src="img\linkedin.png" alt="jhj" width="200px;" height="70px;" /> </a>
</div>
<div id="child2"> <a>Home</a> <a>Examples</a> <a>Tricks</a> <a>Contact us</a>
</div>
</div>
Try changing the styles for both children to the following:
#child1 {
left: 100px;
position:absolute;
width: 50%;
}
#child2 {
position: absolute;
right: 0;
margin-right: 20px;
text-align: right;
width: 50%;
margin-top: 15px;
font-size: 1.5em;
}
To be able to affect to the parent div the #child2 should be position: relative; like this:
#child2 {
position: relative;
top: 15;
margin-top: 0;
}
https://jsfiddle.net/eapo/1tkqsm5q/
Here is my tricky problem. I'm trying to do this:
http://www.hostingpics.net/viewer.php?id=767312test.gif
(More clear than an explication I think).
My structure :
<header></header>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>
<footer></footer>
Important informations :
"Header" is fix
"Content" fit to the screen less the height of header
Every "section" are the same but with different content
When the image comes to an end, the "content" div is unfixed.
I am using "section" for implementing a next and previous button in the header (with anchors).
My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif
For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.
I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.
Thanks for your help!
This is pretty close to what you're asking for (using CSS only).
This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.
The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.
HTML:
<header>Header</header>
<div class="top-bar"></div>
<div class="bottom-bar"></div>
<div class="section">
<div class="text">Section 1 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/100/1000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 2 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/200/2000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 3 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/300/3000"/></div>
</div>
</div>
<footer>Footer</footer>
CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
z-index: 5;
}
.top-bar {
top: 100px;
}
.bottom-bar {
bottom: 0;
}
footer, .text {
position: relative;
z-index: 6;
}
JSFiddle here.
For an almost completely correct solution, here is one with some jQuery involved.
New CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
}
.top-bar {
top: 100px;
z-index: 5;
}
.bottom-bar {
bottom: 0;
z-index: 7;
}
footer, .text {
position: relative;
z-index: 8;
}
.img-fix {
bottom: 40px;
height: 400px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 6;
}
jQuery:
$(document).ready(function(){
$(".content").each(function(){
$(this).append($(this).html());
$(this).find(".img + .img").wrap("<div class='img-fix'></div>");
});
$(window).resize(function() {
resizeImgFix();
});
resizeImgFix();
});
function resizeImgFix() {
$(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
$(".img-fix").each(function(){
$(this).scrollTop($(this).prop("scrollHeight"));
});
}
JSFiddle here.
Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.