I am trying to accomplish the design that's shown in the image. However, z-index is not working on the absolute elements when I am trying to put them behind the cards. What am I doing wrong here? Does it have to do with the flex parent or something?
FYI - I am using styled components for styling
const CardWrapper = styled.div`
display: flex;
position: relative;
z-index: 0;
`;
const CardWrapLeftIcon = styled.div`
position: absolute;
top: -80px;
left: -230px;
z-index: 1;
`;
const CardWrapRightIcon = styled.div`
position: absolute;
top: -220px;
right: -300px;
z-index: 1;
`;
const Card = styled.div`
z-index: 2;
position: relative;
`;
<CardWrapper>
<CardWrapLeftIcon>
<img src="/images/image.svg" alt="Card wrap left icon" height={320} width={460} />
</CardWrapLeftIcon>
<CardWrapRightIcon>
<img src="/images/image.svg" alt="Card wrap right icon" height={480} width={421} />
</CardWrapRightIcon>
<Card>
<h4>Card 1</h4>
</Card>
<Card>
<h4>Card 2</h4>
</Card>
<Card>
<h4>Card 3</h4>
</Card>
</CardWrapper>
The problem here should be that it's not in the same z-index context (see more in this article.) You can wrap all the absolute elements in a div, and then make that parallel to the div containing the cards. Set the z-index of that div to be lower than the div containing the cards.
i.e
<div style="z-index:1;">
Cards.
</div>
<div style="z-index:0; position: absolute;">
<img style="position: absolute";>
...
</div>
Related
I'm building carousel with react, and content images are horizontally aligned.
If I say 3 tags are in div with width 1200px, how can I control these images what I want whether it's overflow container div or not? ( cf. It's not important, however I'm using React.js)
sorry for skipping my codes so far. I'm trying to handle this with styled-components"
const SliderContainer = styled.div`
overflow: hidden;
width: 100%;
position:relative;
`;
const Slider = styled.div`
width:100%;
overflow:hidden;
display: flex;
`
const IMG = styled.img`
width: 100%;
height: 70vh;
`;
export const Slide: SFC<{
src?: string,
alt?: string
}> =({
src,
alt
}) => {
return(
<IMG src={src} alt={alt}/>
)
}
export const Carousel: FC = () => {
return(
<SliderContainer>
<Slider>
<Slide src={"1.png"}/>
<Slide src={"2.png"}/>
<Slide src={"3.png"}/>
</Slider>
</SliderContainer>
)
<div class="parent">
<div class="container">
<img id="img1" />
<img id="img2" />
<img id="img3" />
</div>
</div>
when we want those images( or contents) in div which has container as a classname over flow <div class="parent"></div>
we should specify the length of <div class="container"></div>
so in this case
.parent{
width: 100%;
overflow;
}
.container{
display: flex; // so we have 3 images horizontally
width: 1028px; // whatever but more than .parent widh
}
.img{
width:100%;
height: auto;
}
the reason we should specify .container div width is, we have flex display in this case, so whole img width might be auto resize through this flex properties.
and .parent's overflow: hidden property only make sense when it's child tag has large length more than itself.
I want to create a scrollable area for the text (class text), who have the size of the picture (class picture).
<div class="wrapper">
<div class="picture">
<img src="..." >
</div>
<div class="text">
<p>....</p>
</div>
</div>
The only way, I have found is set the size for the wrapper but if the picture have height more importe than the wrapper, she is crop.
So make it's possible to realize a scroll area for text with the size of picture?
I assumed they are columns. Not possible for rows with CSS.
Try this, if you have extra paragraphs wrap them in a div and change the selector accordingly.
.wrapper {
display: flex;
}
.picture,
.text {
flex: 1; /* example */
position: relative;
}
.text p {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow: auto;
}
Here is the repository for my personal website: https://github.com/flakpanzer40/flakpanzer40.github.io
As you may notice, the particles I've used are simply showing below my name, image, and description. I've tried numerous times to overlap them so that the particles happen in the back, but to no avail. I've tried absolute positions, z-index, re-arranging the DIVs, etc. I'm terrible at CSS.
Can anyone help?
Please add following styles:
.container {
/*other css*/
position: relative;
z-index: 1;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
Use the following Code:
HTML:
<div id="particles-js" style="">
<canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
<div class="intro-text">
<span class="name">University of Waterloo Computer Science</span>
<hr class="star-light">
<span class="skills">Problem_solving expert - Hardworking - Passionate</span>
</div>
</div>
</div>
</div>
</div>
CSS:
#particles-js {
width: 100%;
height: 100%;
background-color: #13717c;
position: relative;
top: 0;
}
It is important that the parent (#particles-js) has position: relative so that you can use absolute positioning for the children.
I have a small example, with two adjacent divs with a background image. This divs are tiles in a tile based editor. I want to place an image into the first div and change the position of the image, so that the image overlaps both divs (see http://jsfiddle.net/WRZJe/16/). I've set the z-index of all divs and I've set the z-index of the image. The position attribute for both, divs and image is set to absolute:
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -1040px;
background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img"
src="1.png" alt="token1" style="top: 0px; left: 40px">
</div>
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
Here is the relevant css-code:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
z-index: 5;
}
.token-img {
position: absolute;
z-index: 50;
}
As the z-index of the images is higher then both divs, I expect the image to be drawn in front of both divs. But page behaves like no z-indexes where given. The image hides behind the second div and would be in front of every div before the image containing div.
What might cause the browser (I've tested Safari and FF) to ignore the given z-index?
Update: I've added a screenshot from the actual application (http://robitzki.de/zindex.png) that shows, that the image moves behind those divs, that are placed after the containing div.
Each div.show-tile (which are all siblings) creates an own stacking context! Child elements remain in the stacking context of the parent, thus your img will be hidden if it is adjacent to a div which has a higher z-index as the images parent div. The z-index of the image itself (=child) does not matter in this case.
In order to have the image overlap all the divs, the cleanest solution would be to not put it into one of the divs, but put it separately as a sibling to your .show-tile divs and give it the highest z-index.
Alternatively, you could omit your absolute positioning on the divs - this would make the img having it's position depend on #dungeon_canvas.
If you cannot do so, you have to assure that the div which holds your image always has the highest z-index.
You have to put the second div before the first one so that it comes before the img tag
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/17
If you can move the img tags out of the divs and position them using similar coordinates to the divs then the following will produce the desired display
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" />
<img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" />
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/20
Because the second .show-tile has a higher z-index than the image, the image will be cut off
try this:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
/*z-index: 5;*/
}
.token-img {
position: absolute;
z-index: 1;
}
Check fiddle to see it work
Now do easily this as like this Live Demo
Html code
<div class="main-container">
<div class="pic-1 pic-5"></div>
<div class="pic-1 pic-3"></div>
<div class="pic-1 pic-2"></div>
<div class="pic-1 pic-4"></div>
<img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change">
</div>
Css
.pic-1 {
background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png");
height: 80px;
width: 80px;
float:left;
position:relative;
background-position: -3px -3px;
}
.pic-2{
clear:left;
}
.pic-change{
position:absolute;
left:40px;
top:40px;
z-index:3;
}
.main-container{
position:relative;
}
.pic-4{
z-index:4;
}
Demo
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/