newbie to z-index. I want to put backleftBox and backrightBox behind the frontBox, but my code doesnt seem working.
<style type="text/css">
#frontBox{ width: 400px; height: 500px; margin: 0 auto; background-color: #ccc; position: relative; z-index: 99;}
#backleftBox{ width: 90px; height: 90px; background-color: green; position: absolute; left: -25px; z-index: 12;}
#backrightBox { width: 90px; height: 90px; background-color: blue; position: absolute; left: -15px; z-index: 11;}
</style>
<div id="frontBox">
<div id="backleftBox"></div>
<div id="backrightBox"></div>
</div>
The problem you have here is that "backleftBox" and "backrightBox" are children of "frontBox". Just move them outside "frontBox" and they should go underneath.
backrightBox and backleftBox can't be behind frontBox when they're inside it. Not sure how you want it to look, but they can't be nested like that, and you will then have to change your position, and margin attributes to align them. the z-index is fine the way you have it.
Related
I want to have fixed social media icons in the top right corner of my page. I've got working css code that accomplishes this, but I'm wondering if there is a more efficient way since it seems repetitive. I'd also like to hear any compatibility issues you notice.
img.body {
display: block;
margin-left: auto;
margin-right: auto;
}
img.tile1 {
position: fixed;
top: 0px;
right: 0px;
width: 48px;
height: 48px;
}
img.tile2 {
position: fixed;
top: 0px;
right: 48px;
width: 48px;
height: 48px;
}
<img src="graphics/ig.png" class="tile1">
<img src="graphics/fb.png" class="tile2">
You'd be better off wrapping a container around both of the icons, then applying position: fixed; to that container. This will be much easier to control rather than having to use position:fixed; on both of the icons individually.
Use top:0; and right: 0; on the container, this will position the container in the top right corner.
body {
background-color: teal;
height: 200vh;
}
a img {
max-width: 50px;
max-height: 50px;
}
.icon-container {
position: fixed;
width: fit-content;
top: 0;
right: 0;
}
h1 {
text-align: center;
}
<body>
<div class="icon-container">
<img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile1">
<img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile2">
</div>
<h1>Element</h1>
</body>
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different.
I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to achieve this:
.image {
position: absolute;
top: 0;
left: 0;
margin-top: -30px;
margin-left: -10px;
display: block;
height: 200px;
width: 140px;
}
Now I need to achieve the same with an <img /> element. What I'm hoping to achieve is something like this:
So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?
something like this?
.parent {
display:inline-block;
width: 100px;
height: 300px;
background-color:lightgray;
margin-left: 100px;
}
.child {
width: 200px;
height:100px;
border-radius: 100px;;
background-color:gray;
position:abolute;
margin-left: -50px;
margin-top:100px;
}
<div class='parent'>
<img class='child'/>
</div>
edit: as per the comments below this is what i see
See the method bellow
Wrap the image in a DIV
Add border-radius to achieve the egg like shape
Add overflow with a value of hidden to the image container
use an image that's bigger than it's container so that it will take on the egg like shape.
#square {
width: 300px;
height: 300px;
background-color: #6D9BBE;
position: relative; /* Relative to curtail overlap */
margin: 0 auto;
}
#square #eggy {
width: 380px;
height: 200px;
background-color: #8500B2;
border-radius: 50%;
position: absolute;
top: 50px;
left: -40px;
overflow: hidden;
}
#eggy img {
width: 390px
height: 240px;
}
<div id="square">
<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->
</div><!-- End Square -->
I have no idea how to title this properly, but here is my problem:
I have this layout:
<html>
<body>
<div id="content">this is my page</div>
<div id="button">magic button</div>
</body>
</html>
css:
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
html, body{
height: 100%;
}
#content {
margin: 0 auto;
width: 700px;
min-height: 100%;
background-color: #eee;
}
See fiddle here: http://jsfiddle.net/n6UPF/
My page works just as I want it, the button is exactly where I want it to be.
But if I change the text on my button, it is no longer positioned properly.
I would like to position it "fixed" relative to the right edge of my content area.
Can this be done in pure CSS?
If modifying the HTML is acceptable, you can use a wrapper:
<div id="button-wrapper">
<div id="button">magic button</div>
</div>
#button-wrapper {
bottom: 40px;
left: 50%;
margin-left: 350px;
position: fixed;
}
#button {
background-color: red;
padding: 5px;
position: absolute;
right: 10px;
white-space: nowrap;
}
http://dabblet.com/gist/3740941
No, it's not really pretty, but...
Do you mean...
#button
{
position: fixed;
right: 20px;
}
...or whatever distance you want on the right? Or something else?
I'm not sure if I fully understand your question correctly, but could you not just use the right property instead of left?
Example: http://jsfiddle.net/baKra/
Usually when I run into trouble with exact positioning, it's because I haven't specified the width of my positioned element. The browser will try to calculate it itself, and that can throw things off.
Is there any way you can post what it looks like when it's no longer positioned properly?
I am wondering if you are looking for the float:right property.
Can you look at http://jsfiddle.net/n6UPF/1/ and see if that is what you were looking for.
Try changing
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
to
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}
Kind of a weird example, but here goes:
How do I get an absolutely positioned DIV to expand when content is inserted that goes beyond its borders? Here is the code:
<html>
<head>
<style>
* {margin: 0; padding: 0;}
body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
div#container {position: relative; height: 100px; width: 50px;}
div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}
div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}
span#title {position: relative; overflow: visible}
</style>
</head>
<body>
<div id="container">
<div id="a"><span id="title">This is my title</span></div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</div>
</body>
In the example above, the content in DIV "a" is hidden (due to the width/height restrictions). If we set this to "min-height" and "min-width" the content just sits "behind" the other divs, but doesn't move them. How can I accomplish this?
Note: I'm trying to figure this out, as I need to "reposition" the order in which DIVs are ordered in the HTML (I'm trying to make a child template in Wordpress). Any examples/resources are GREATLY appreciated.
Cheers,
Sapiensgladio
You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.
You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.
Example CSS:
#content {
position: absolute;
min-height: 5em;
max-height: 15em;
min-width: 5em;
max-width: 15em;
border: 1px solid #f90;
bottom: 0.5em;
right: 0.5em;
overflow: auto;
}
JS Fiddle demo.
The above demo uses jQuery to add extra content to the #content div, but that's just for dynamic demonstration purposes, the jQuery is not, in any way, required for the css to work.