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.
Related
HTML
<div id="galerie">
<div id="stanga">
</div>
</div>
CSS
#galerie {
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:20px;
margin-left: 0px;
}
I want my red square to have margin-top:10px from the yellow container.
http://jsfiddle.net/97fzwuxh/16/
Margins will collapse by design, So your inner margin have effect on your outer div.
add overflow:auto to your #galerie style
or
add padding:1px to your #galerie style
Your problem is called adjoining
Two margins are adjoinin of a box and top margin of its first in-flow child, if both belong to vertically-adjacent box edges
The margins are not working because they are collapsing, use:
position: relative;
top: 20px;
Here the updated fiddle: "http://jsfiddle.net/97fzwuxh/18/"
You can use absolute for this.
#galerie {
position: relative;
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
margin-top: 10px;
margin-left: 0px;
}
You need position: relative on the outer element(#galerie)
and position: absolute on the inner element(#stanga)
#galerie {
width: 974px;
height: 500px;
background-color:yellow;
position: relative;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:200px;
position: absolute;
}
Here is the updated working fiddle:
http://jsfiddle.net/97fzwuxh/19/
Also, read this article I found it very useful: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
TLDR: A page element with relative positioning gives you the control to absolutely position children elements inside of it.
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
i need to make a div position absolute and make it in center but i used does not make it happen. i have gone crazy trying to make it to the center.
i have tried using left and right value to 0. it should have made the div to the center automatically.
need to figure out what went wrong?
help please!
here is the code that i have tried and stuck
.slider-wrap {
width: 1000px;
height: 500px;
left: 0;
right: 0;
top: 100px;
background: #096;
z-index: 99;
margin: 0 auto;
}
You forgot to set the position to absolute
.slider-wrap {
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
Add position:absolute;
.slider-wrap {
position:absolute;
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
The proper way to center a div is as such:
.slider-wrap {
...
margin-right: auto;
margin-left: auto;
}
Also note that z-index will not work unless you set the position attribute. ie: position: absolute;
You need to add position: absolute; to your css for absolute positioning.
Note: Also add position: relative; to the parent element you whish to use as wrapper.
So for example:
.slider-container {
position: relative;
width: 100%;
height: 100%;
...
}
.slider-wrap {
position: absolute;
...
}
The width and height of 100% is optional, just added it in case you want the container to take up the whole remaining space or the whole page if it's right after the opening body tag...
To position the slider-wrap in the center of the screen (so both horizontal and vertical centered), try this:
html, body {
width: 100%;
height: 100%;
}
.slider-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
...
}
.slider-wrap {
position: absolute;
width: 1000px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px; // half the height
margin-left: -500px; // half the width
...
}
If you're able to make the slider-wrap display inline with e.g. display: inline-block; (keep browser support in mind with this one), then you could use the following instead:
.slider-container {
position: relative;
width: 100%;
height: 100%;
text-align: center; // this one makes the slider-wrap center horizontally
...
}
.slider-wrap {
position: relative;
display: inline-block;
width: 1000px;
height: 500px;
vertical-align: middle; // this one does the vertical centering
...
}
Another option is using display: table-cell;. It's about the same as the previous one:
.slider-container {
position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
...
}
.slider-wrap {
position: relative;
display: table-cell;
width: 1000px;
height: 500px;
vertical-align: middle;
...
}
Also line-height: ?px; will make vertical centering possible. But I think this answer is long enough now :-P
Give it a try. Fiddle around with this until you're happy with the result :-)
Try this it should work fine.
display:block;
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
}
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.