Pure JavaScript: Center an absolute position div in body - javascript

What's the easiest and shortest way to center an absolute position div in the body without using a library like jQuery. Thank you!
Edit:
Something like http://jsfiddle.net/apfwh/ but maybe with a bit cleaner?

I think no js needed. CSS will do it (see here):
body {
background: #888;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
UPD
In case you don't have fixed width/height of element:
JS (when element is opened):
element.style.margitLeft = -element.offsetWidth / 2
element.style.margitTop = -element.offsetHeight / 2
CSS:
.box {
background: #ccc;
position: fixed;
left: 50%;
top: 50%;
}

Related

Adding a margin to a page, including absolutely/fixed positioned elements too

Is there a way to set a global margin to a page which will include absolutely and fixed positioned elements as well?
This is possible is you wrap these absolute / fixed elements with an element which has transforms set on them.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
body {
margin: 100px;
color: white;
transform: translateX(0);
border-top: 2px solid green;
}
.absolute, .fixed {
width: 100px;
height: 100px;
top: 0;
}
.absolute {
position: absolute;
background-color: red;
left: 0;
}
.fixed {
position: fixed;
background-color: blue;
right: 0;
}
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
Notice that, in the above snippet, both the absolute and the fixed element are positioned relative to the body with the margin.
Note:
1) I don't necessarily recommend using it this way as it will most probably cause confusion in the long run.
2) As #Temani Afif pointed out fixed elements will behave like absolute elements this way - so this technique may not work as expected depending on the context.
You can add margin to all elements with the wildcard selector, but then you'll spend a lot of time cancelling this out on internal elements. You can try something like body > * to add margin to top level elements.
body > * {
margin: 50px;
}
#abs {
position: absolute;
top: 0;
left: 0;
background: red;
width: 100px;
height: 100px;
}
#abs .inner {
position: absolute;
top: 0;
left: 0;
background: blue;
width: 50px;
height: 50px;
}
#fixed {
position: fixed;
bottom: 0;
right: 0;
background: green;
width: 100px;
height: 100px;
}
<div id="fixed"></div>
<div id="abs">
<div class="inner"></div>
<div>

Can't override default margin of h1 text?

Despite doing:
top: 0%;
margin-top: 0%;
padding-top: 0%;
there's still a gap between the top of the header in #txt and #outer - why?
It looks like it's because the <h1> text has a default margin that I can't override?
JS FIDDLE
Because you have a height of 90% which makes the object not as high as the parent and is therefore unable to reach the bottom.
Changing the height to 100% will fix the problem.
Edit:
If you want to move the space from the bottom of the div to the top you have to change top: 0% to top: 10%.
You just need to add this to your CSS
#txt h1 {
margin-top: 0;
}
You had set a fixed height for #txt, from what i understood, this is what you're looking for?
https://jsfiddle.net/dryy2j31/5/
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: auto;
}
In your fiddle you are applying the margin:0%; to the #txt div, so no rules are being applied to the <h1>. You just need to add #txt h1 { margin: 0; see below.
var outer = document.createElement("div");
outer.id = "outer";
var txt = document.createElement("div");
txt.id = "txt";
txt.innerHTML = "<h1>Enter your email</h1> <p>We need your email to do stuff.</p>";
outer.appendChild(txt);
document.body.appendChild(outer);
#outer {
background-color: yellow;
width: 530px;
height: 300px;
position: absolute;
left: 0%;
right: 0%;
top: 9.05%;
margin: 0 auto;
}
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: 100%;
}
#txt h1 {
margin: 0;
}

Position fixed doesn't work inside relative position, CSS

I'm trying to put div with position:fixed inside div with position:relative.
This is CSS:
#wrapper {
background-color: #199eaf;
height: auto;
left: 0;
min-height: 100%;
position: relative;
text-align: left;
top: 0;
width: 100%;
}
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
width: calc(100% + 100px);
z-index: 800;
}
This for some reason doesn't work as I expect. My div goes inside next div in #wrapper div (See screenshot: http://www.awesomescreenshot.com/image/445294/fb3d41bfb92a0f76d60266ed0ac4f0a9) I can make this work just if I use one of this two solution for .menu-space div
transform: skewY(-10deg) translate(0px, -101px);
or
top: -170px;
But I really don't want to use those minus values. Can someone please help me to find better solution?
This is how menu should look
http://www.awesomescreenshot.com/image/445297/e799ee584ead6007b9fe16628ccc15bc
and on scroll:
http://www.awesomescreenshot.com/image/445300/cee6600490bab7e58a479da23ac9974a
Thank you!
By default, transforms happen from the center of the element. Your skew is twisting the element from its center, causing the left side to drop and the right side to rise.
Set transform-origin: top left (or 0 0 if you prefer) and you can get rid of the negative top or translate.
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
transform-origin: top left;
width: calc(100% + 100px);
z-index: 800;
}
See MDN
The reason for this is the transform: skewY(-10deg);. As per the W3C spec, if position: fixed; is used on an element inside an element with a transformation applied to it, the fixed-position element is positioned relative to that transformed element.

Image 100% of parent. Parent is position fixed

Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed
DEMO http://jsfiddle.net/gop4jhm9/5/
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
background: red;
display: inline-block;
padding: 10px;
max-height: 30%;
}
#myDiv img {
width: auto;
height: 100%; // being ignored
}
Is there any way of doing this via CSS, JS, jquery ?
The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.
That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img.
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
background: red;
display: inline-block;
padding: 10px;
}
#myDiv.img
{
width: auto;
max-height:90%;
}

How to make DIV element opaque

I have a div at the top of my site which is 100% wide and in a absolute and fixed position. The code for it is like:
div.header{
height: 60px;
width: 100%;
position: absolute;
position: fixed;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
Now everything in that works, but when users scroll down the site content appears behind this. Is there a way that I can prevent this from happening?
remove position: fixed;
it should be like
div.header{
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
If you want to make it fixed than remove position:absolute. both will not work together.
you have position:absolute and fixed both together, but fixed will override the position because it is after absolute.
Now if you want to appear any element above of other and it has a position: absolute or fixed you can use z-index, heigher z-index element will cover up the lower z-index element.
A div element that needs to be displayed on front should have a higher z-index value than the element that needs to be behind.
eg.
div.header{
....
....
z-index:9999;
}
div.normal{
....
....
z-index:9998;
}
On my website I have a div footer that always appears at the bottom. I use the following code - It may come in handy in the future or for someone searching for a similar query.
#bottom
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
background-color: rgb(30,122,212);
border-top:3px solid black;
border-bottom:1px solid black;
-moz-box-sadow: 0 0 10px white;
box-shadow: 0 0 10px white;
}
I hope this helps.
It is a silly question. Just remove the position: fixed; property from your class.

Categories