I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
Related
I am trying to create a stacked box look using ::after. I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL), but when I place the code on the Wordpress site I am working on, I can't achieve the same stacking effect in the same order (http://aptw.nk-creative.com/)
I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL).
<div class="offset-boxes">
<h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>
.offset-boxes {
position: relative;
max-width: 300px;
height: 290px;
background-color: lightpink;
margin-top: 20px;
padding: 25px
}
.offset-boxes::after {
content: "";
width: 100%;
right: -40px;
top: -40px;
height: 100%;
background-color: red;
position: absolute;
z-index: -1;
}
I expected the code to look like the codepen, but the WP site does not.
It looks like your ::after pseudo element is buried. You can add this to your CSS to the parent element of .offset-boxes:
.textwidget {
position: relative;
z-index: 1;
}
Is there any way to make semi-transparent overlapping elements, from which only higher z-index will be visible? I would like the images to be transparent to the background, but not to the other pictures. Here is fiddle.
body {
background: white;
}
section {
height: 400px;
position: relative;
perspective: 500px;
}
img {
height: 300px;
left: 50%;
margin: -100px;
position: absolute;
top: 40%;
transform: rotateY(-30deg);
width: 200px;
}
img:nth-child(1) {
left: 30%;
opacity: 0.8;
z-index: 3;
}
img:nth-child(2) {
left: 45%;
opacity: 0.4;
z-index: 2;
}
img:nth-child(3) {
left: 60%;
opacity: 0.2;
z-index: 1;
}
<section>
<img src="https://media4.s-nbcnews.com/j/newscms/2016_36/1685951/ss-160826-twip-05_8cf6d4cb83758449fd400c7c3d71aa1f.nbcnews-ux-2880-1000.jpg">
<img src="http://toprozdily.cz/wp-content/uploads/2015/04/slon-africky.jpg">
<img src="http://img.huffingtonpost.com/asset/,scalefit_950_800_noupscale/55fc14631c00004800082775.jpeg">
</section>
So what you're going to need to do is put the images each in their own div container and set the div background-color to white. That way you see the white background through the semi-opaque images and not the image underneath.
I edited your fiddle to give you the functionality you're looking for. Hope it helps!
There isn't a way to make an element be transparent to one element but opaque to another.
However, you might be able to simulate the transparency by tinting the images instead, either by positioning a partially-transparent div of that color over each image, or with CSS filters:
https://www.w3schools.com/cssref/css3_pr_filter.asp
I'have 3 div blocks and I would like to place them as in the picture.
It works with the following CSS code, but when I resizes my browser, the blocks aren't exactly at the same position (you can see it at the 2 pictures with comments).
Do you have an idea ? Maybe an other position (absolute or other ?).
PS : I use relative position because I use JqueryUI (draggable, resizable) to create blocks and to position them.
Thanks.
Here is the CSS code :
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
position: relative;
top: 50px;
}
#bloc2 {
width: 40%;
background: lime;
position: relative;
top: 100px;
left: 2%;
}
#bloc3 {
width: 45%;
background: purple;
position: relative;
top: -300px;
left: 50%;
}
The problem here is the relative positioning. It's going to cause the elements to be positioned relative to the parent container #corps. If you don't plan on editing that with jQuery in any other way, it's not going to behave like you're describing you'd like it to.
Here's a jsfiddle that iterates the best way to accomplish what you're looking for with css using inline-block display and vertical alignment: https://jsfiddle.net/4gw22vrh/
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
display:inline-block;
}
#bloc2 {
width: 40%;
background: lime;
}
#bloc3 {
width: 45%;
background: purple;
display:inline-block;
vertical-align:top;
}
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.
I have
<div id=overlay>
<div></div>
</div>
the height and width of the outer div is set to 100%.
What happens here is, the 100% refers to the size of the element inside (inside div).
I have a dynamically changing element on inside div, and I wanted to be my outer div got the size of the page screen.
NOTE that these div (outer and inside) are a popup element. So I wanted to cover all other elements behind the popup that's why I need the 100% of the page behind.
this is my css for the outer div
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
text-align:center;
z-index: 1000;
background-image:url(template/popup-bg.png);
}
my js
function overlay(e)
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
Simply change the HTML to this
<div id='overlay' class='hideOverlay'>
<div></div>
</div>
Now on clicking simply change the class.
Change your js to this
function overlay(e)
{
$('#overlay').attr('class', 'showOverlay');
}
Check the following style
.showOverlay
{
background-color: red;
height: 100%;
left: 0;
top: 0;
opacity: 0.2;
position: fixed;
width: 100%;
z-index: 1001;
}
.hideOverlay
{
display:none;
}
Background-color is given just to check the div's visibility. Change it as per your choice.
It is nice to have some opacity for overlays to have a better look and feel effect.
Try to set:
position: absolute;
Something like this...
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;