I have a problem of rendering in webkit browsers.
<div class="left">
<div class="fixed"></div>
</div>
<div class="container">
<div class="square"></div>
</div>
.left {
position: absolute;
top: 100px;
left: 10px;
width: 100px;
height: 300px;
background: red;
z-index: 2;
overflow-y: hidden;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 90px;
z-index: 2;
background: blue;
}
.container {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
background: grey;
overflow-y: hidden;
z-index: 1;
}
.square {
margin-left: 120px;
margin-top: 120px;
width: 40px;
height: 53px;
z-index: 481;
background: green;
-webkit-user-drag: none;
-webkit-user-select: none;
position: absolute;
}
My fixed element is not visible : http://jsfiddle.net/RV5WP/3/
But it's work if I delete the webkit transform : http://jsfiddle.net/RV5WP/2/
I tried to add translatez(0) to my fixed element or to the parent but that doesn't solved my problem.
I can't reproduce in firefox or opera.
Does anyone have an idea ?
Related
https://codepen.io/anon/pen/QZVVbY
I want the code above of the green box to be topmost.
But apparently, it's under another small z-index container.
I don't want to change parent z-index. How to achieve this?
Not to change the z-index of parent and other parent
.container{
width: 500px;
height: 50px;
}
.container1 {
background: red;
width: 500px;
height: 50px;
position: relative;
z-index: 2;
}
.container2 {
background: blue;
width: 50px;
height: 50px;
position: relative;
}
.container3 {
background: green;
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 20px;
z-index: 2200000;
}
.container4 {
background: yellow;
width: 500px;
height: 50px;
position: absolute;
top: 0;
left: 20px;
z-index: 5;
}
.container5 {
background: gray;
width: 50px;
height: 50px;
position: absolute;
top: 15px;
left: 40px;
}
<div class="container1">
<div class="container2"></div>
<div class="container3"></div>
</div>
<div class="container4">
<div class="container5"></div>
</div>
The issue is that having a z-index on container1 is creating a layer stack. This results in all child elements with a z-index to be relative to the parents z-index. In order to make this work removing the z-index style from container will get the effect you're wanting.
.container{
width: 500px;
height: 50px;
}
.container1 {
background: red;
width: 500px;
height: 50px;
position: relative;
}
.container2 {
background: blue;
width: 50px;
height: 50px;
position: relative;
}
.container3 {
background: green;
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 20px;
z-index: 999999;
}
.container4 {
background: yellow;
width: 500px;
height: 50px;
position: absolute;
top: 0;
left: 20px;
z-index: 5;
}
.container5 {
background: gray;
width: 50px;
height: 50px;
position: absolute;
top: 15px;
left: 40px;
}
<div with z-index=1 class="container1" >
<div class="container2"></div>
<div with z-index=100 class="container3" ></div>
</div>
<div with z-index=2 class="container4" >
<div class="container5"></div>
</div>
I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here
how about this solution. I have made few changes in your code.
please have look carefully
DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0.5px solid black;
}
.top-cover {
width: 100%;
height: 300px;
background-image: url('IMG_0044.JPG');
background-size: cover;
background-position: center;
}
.main-cover {
width: 90%;
position: relative;
height: 700px;
left: 5%;
top: -60px;
z-index: 1;
background-color: brown;
border: solid 5px green;
}
#dp {
width: 20%;
position: absolute;
left: 40%;
top: -10%;
z-index: 2;
display: none;
}
.dp-pic {
width: 20vw;
min-width: 75px;
max-width: 150px;
position: absolute;
left: 40%;
top: -8%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp"></div>
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
Following should generate your desired layout. Add borders or other fancy styles as you want.
body {
margin: 0;
padding: 0;
}
.top-cover {
width: 100%;
height: 300px;
background: #eee;
}
.main-cover {
width: 90%;
height: 700px;
position: relative;
margin: -60px auto 0;
z-index: 1;
background-color: brown;
}
#dp {
width: 20%;
position: absolute;
left: 50%;
margin: -10% 0 0 -10%;
z-index: 2;
}
.dp-pic {
width: 100%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp">
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
</div>
I'm trying to have an image in the body of the page that's full width. Not a background. On the Center of this image id like a bar that blurs and darkens the background image. Then id like words on the bar.
Here is what i got:
#superimagecontainer {
position: relative;
height: auto;
}
#container4 {
position: absolute;
left: 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 0;
}
#container4 img {
width: 100%;
position: relative;
z-index: 0;
}
#container4b {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 1;
}
#container4b img {
width: 100%;
position: relative;
filter: blur(3px) brightness(50%);
}
h8 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
opacity: 0.75;
}
<div id="superimagecontainer">
<div id="container4">
<img src="img/buildings750.jpg" alt="" />
</div>
<div id="container4b">
<img src="img/buildings750.jpg" alt="" />
<h8>THIS IS THE BEST TEXT SAMPLE EVER</h8>
</div>
</div>
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});