I have read here in stackover flow and elsewhere that if we have a parent div with relative position, the child tags with absolute position will not relocate when zooming. But in my following example, it does not obey this rule.
In the main file, I have <img> tags instead of div with ids img1 to
img3
Any advice will be appreciated.
#container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid green;
}
#img1 {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 25%;
}
#img2 {
position: absolute;
width: 20px;
height: 100px;
background: blue;
left: 30%;
}
#img3 {
position: absolute;
width: 20px;
height: 100px;
background: yellow;
left: 60%;
}
<div id="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
Related
I have 3 HTML elements that I want to order on the z plane:
.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}
<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>
I want the button to be on top of the bank but behind the card. But the button is always on top of both the bank and the card no matter what I try.
Edit: I noticed that removing z-index and transform from '.bank' solves it, but I need the transform property. What can I do?
What may cause it not to work? Thanks
Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.
.bank {
position:relative;
background: red;
width: 500px;
height: 200px;
}
.card {
position: absolute;
top:0;
z-index: 2;
height: 100px;
width: 400px;
background: blue;
}
.button {
position: absolute;
top: 0;
z-index: 1;
height: 150px;
width: 450px;
background: yellow;
}
.container {
position: relative;
}
<div class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>
UPDATE
Considering you code, the only way is to remove the z-index and transform from .bank or it will be impossible because your elements will never belong to the same stacking context. As you can read in the previous link:
Each stacking context is self-contained: after the element's contents
are stacked, the whole element is considered in the stacking order of
the parent stacking context.
Related for more details: Why can't an element with a z-index value cover its child?
You can do this by adding z-index only to card class and placing the elements in absolute.
.bank {
width: 150px;
background: red;
height: 150px;
position: absolute;
top: 0;
left: 0;
}
.card {
width: 50px;
background: black;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button {
width: 100px;
background: blue;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
I am trying to overlay a circle over a square image. The text needs to be centered hoziontally and verticaly in the circle.
I have almost got it right with a square div, but as soon as I put an image into the mix, the circle moves below the image.
My code.
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: relative;
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
The Container will ultimately be of variable width, determined by bootstrap col
Since you want to position your circle over the image, you have to use position: absolute instead of relative. This will take it out of the document flow and you can position it anywhere you want within the parent element.
In order for this to work, you will also have to declare position: relative on the parent.
See proof-of-concept example below:
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
position: relative; /* To allow children to be absolutely positioned */
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: absolute; /* Use absolute positioning */
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
I have to do move a div to overflow hidden parent div. I use some plugin on the page. So I can't change divs ordering. I want to move green box over the blue and red box. I hope there is a solution.
https://jsfiddle.net/bigboytr/zssub946/
Important note : If I change the parent divs position attribute, plugin not working properly.
#box1 {
position: absolute;
background: red;
padding: 5px;
width: 150px;
height: 150px;
}
#box2 {
position: absolute;
overflow: hidden;
background: blue;
width: 100px;
height: 100px;
}
#box3 {
position: relative;
background: green;
width: 50px;
height: 50px;
top: -10px;
}
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
Move box2 overflow attribute to box1.
Give padding to box1.
Give negative value to box3 to pop out.
#box1 {
position: absolute;
background: red;
width: 100px;
height: 100px;
padding: 5px;
overflow: hidden;
}
#box2 {
position: absolute;
background: blue;
width: 100px;
height: 100px;
}
#box3 {
position: absolute;
background: green;
width: 50px;
height: 50px;
top: -5px;
right: 0;
}
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
#box1 { position: absolute; background: red; padding: 5px; width: 150px; height: 150px; }
#box2 { position: absolute; overflow: hidden; background: blue; width: 100px; height: 100px; }
#box3 { position: relative; background: green; width: 50px; height: 50px; top: -10px; }
#box3 {
/* left 150px (box1) - box3 width 50px = 100px */
z-index: 2; padding: 0; top: -5px; left: 100px }
#box2 { overflow: visible }
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
See http://jsfiddle.net/xmct0wot/
Changes were necessary to box2 and box3:
#box3 { width: 160px; height: 160px;
/* 160px because width, height = 150px plus 5px + 5px padding */
z-index: 2; padding: 0; top: -5px; left: -5px }
#box2 { overflow: visible }
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
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