<div class="box">
<div class="top">
</div>
<div class="bottom">
<img src="//placehold.it/300x300">
</div>
</div>
.bottom{
position: absolute;
bottom: 0;
}
I got 2 blocks, top and bottom. In bottom block there is an image that should overlay top block in one place. it overlays Ok but I can't click on element from top block cause browser think i click on bottom. How can it be resolved?
Add
pointer-events : none;
to your .bottom element.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Related
I've recently discovered the use of pseudo elements as graphical elements for design purposes. I'm trying to use a ::after element on a div to create horizontal dividers between sections, below:
.banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner__text, .banner__logo {
width: 50%;
float: left;
}
.banner::after {
content: '';
position: absolute;
left: 0;
right: 0;
border-bottom: 1px solid purple;
}
<div class="app">
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
</div>
However, you will notice that all the ::after elements stack right up at the top; is there a way I can have these absolutely positioned elements that have relatively positioned parents come after each div.banner?
Note: this question ::after pseudo element appearing before has such a specific answer I cannot determine the solution, although it is similar in scope...
UPDATE
Adding overflow: hidden to .banner fixes the after elements stacking up at the top, but they still appear before the rest of the content in each div.banner, while I'd like them after.
Add bottom: 0 to make the dividers appear at the bottom of each .banner. For simplicity you'll probably want to use a bottom border instead of an ::after pseudo-element for this, however. Not everything needs to be done with one. Having said that, there is nothing wrong with experimenting.
The solution here is to add overflow: hidden; to div.banner, per #Temani Afif's comment.
Codepen here
EDIT
Additional Reading
See this question for a detailed description of why this failed, what clearfix is, and how this is conventionally solved.
I need to position the img element (along with other related info about the project) to the bottom right corner of the div with class 'projectItem green'.
Positioning works fine but I cannot get the img element under two parent divs to be visible on the screen. The element highlighting actually highlights the element but your can only see the grid around invisible element.
I tried to use that z-index with the img element instead of the div. I also tried to add display:block parameter to the img element and use z-index there.
Thanx a lot for any pointers!
Here is my code
<div class="projectItem green">
<div class="projectNumber">I-8000</div>
<div title="Testprojekt 25.05.2018" class="halfWidth">Testprojekt 25.05.2018</div>
<div class="halfWidth"><span>Start: </span><span>5/25/2018</span></div>
<div title="" class="halfWidth">UserName</div>
<div class="halfWidth"><span>End: </span><span style="margin-left: 8px;">6/1/2020</span></div>
<div class="halfWidth">Last status update:</div>
<div class="halfWidth"><span style="margin-left: 43px;">5/25/2018</span></div>
<div style="width: 100%; display: inline-block; position: relative; z-index: 1000;"><img style="position: absolute; bottom: 0; right: 0"
src="/system/pscbaf/ImagesLogos/IPM/IPM_NotReported_Icon.PNG">
</div>
</div>
Here is the screenshot from DOM
Here is what I am getting
Here is what I am trying to achieve
In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}
I'm trying to make this gray bar tuck underneath the purple div in the background using z-index in CSS (then pull out with JavaScript when a button is clicked... but that works!).
This is what it looks like now:
The HTML for the area looks like this:
<div id="body">
<div id="container">
<header>
... header content ...
</header>
<div id="pullBar">
... pullBar content ...
</div>
</div>
</div>
And this is what the CSS for #pullbar and #body look like:
#pullBar{
padding:7px 15px;
height:108px;
width:90%;
background:#BCC6CC;
margin-left:-90%;
position: relative;
z-index: 1;
}
#body {
width: 100%;
margin: 0;
background:#401445;
position: relative;
z-index: 5;
}
Thanks!
Tge reason is that the pullbar div inherits the same z-index as the body.Make the pullbar same level as body...
<body>
</body>
<div id="pullbar">
</div>
This code is ok. But it is not recommended to make the pullbar div as the same level as the body.
Use another div like.some main div in place of body and then make the pullbar div in level with the main div
The z-index is nested because of the relative elements (which are nested as well). So you could either move the pullbar to the same level as #body:
<div id="body">
<div id="container">
<header>
... header content ...
</header>
</div>
</div>
<div id="pullBar">
... pullBar content ...
</div>
Or you could use absolute positioning on the pullbar to place it in a 'new' layer, so the z-index will be at the same level as #body too.
Have a look here as well: z-index on absolutely positioned nested elements
I'm new at this so bear with me. I have an absolute positioned box inside a relative container and inside that box I've two other divs, one for posts and one for sprites. The sprites completely disappear in IE7 along with the top (and only the top) border on the "posts." This is basically what it looks like.
<div id="wrapper">
<div id="content">
<div id="left"></div>
<div id="right">
<div id="icon">
</div><!--icon-->
<div id="posts">
<div class="posts_border"></div>
<!--a bunch of other stuff-->
<div class="posts_border"></div>
</div>
</div><!--right-->
</div><!--content-->
</div>
#wrapper{width:900px;margin-top:111px;margin-left:-450px;position:relative;left:50%;}
#content{background-color:#F6EFC9; position:relative; width:900px;height:965px;}
#left{padding-right:10px;width:550px;}
#right{position:absolute;top:0;right:20px;width:300px;}
#icon{margin:10px 0 0 -8px;top:0;right:20px;}
#icon .icon{margin-left:40px;width:50px;height:50px;float:left;}
#email{background:url("../images/icon-sprite.png")left 0 top -110px;}
#twitter{background:url("../images/icon-sprite.png") left 0 top -55px;}
#rss{background:url("../images/icon-sprite.png") left 0 top 3px;}
#posts{background:#E3C66E; margin-top:10px;position:absolute;top:66px;}
#right .posts_border{height:20px;background-color:#442503;}
http://jsfiddle.net/isherwood/aJwKJ/
This seems to work in every browser aside from IE7.
I had to do this in IE10 by changing my Browser/Document mode to IE7/IE7 on a local document. I had problems with jsfiddle loading in that browser/doc mode. I only changed the following sections
#email {
background-image: url("http://placehold.it/32x32");
background-position: 0 -110px;
}
#twitter {
background:url("http://placehold.it/32x32");
background-position:0,-55px;
}
#rss {
background:url("http://placehold.it/32x32");
background-position:0,3px;
}