Can you tell me the exact functioning of position attribute in css and difference in two values i.e "relative" and "absolute". Please tell me it in context of following code:
I am absolute positioned
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And may you also the proper functioning of "-webkit-box-shadow" attribute.
What is the difference:
When you use position relative you are making a div that will be relative to other divs with position absolute. Absolute will basically make the div or that element float above the document. Without having to follow the current dom or what you call it.
When you are simply using position: relative; you are not placing the div any where. But you are actually just creating a relative point for other elements if there is no relative div the position: absolute; will be following the document as relative.
From your css:
In your content, by following the CSS #home will be relative and #home article will be placed over it. Where ever you want to place it. And similarly #about article will be placed over #about.
You will not figure out what is the main idea of absolute or relative untill you write this: top: 0; this will remove all the margins from top side its similar to this margin-top: 0;. You can also try to move the div as much as you want.
Positioning simply lets you move the elements without having to follow the dom(or whatever it is). The basic difference between them is that relative will be the main place or main point from where the placement would start for children of that element. And absolute will follow any nearest parent and will get a new position.
Learn about them here:
Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/position
W3school.com: http://www.w3schools.com/css/css_positioning.asp (if you want to learn the basic).
CSS-Tricks: http://css-tricks.com/almanac/properties/p/position/
W3.org: http://www.w3.org/wiki/CSS/Properties/position
Related
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?
link to site
Using this code at the moment;
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}
Many thanks
These two lines
display: block;
margin: 0 auto;
are a good place to start to center something.
Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.
There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.
Try this for your CSS
header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}
No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.
I tried the code out on your website so it should work. Hope it makes sense.
I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.
I´m currently working on a wordpress site where I want to center my page-wrap using CSS. I´ve tried to implement method 3 on this site without beeing successful.
Site: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I´m using two different divs, one with the id of floater and one with the id of page-wrap. My css looks like this
#floater { float: left; height: 50%; margin-bottom: -481px; }
#page-wrap { clear: both; color: white; width: 1594px; height: 962px; margin: auto; position: relative; }
I also want to point out that inside my page-wrap div I have plenty of other divs to build my design (they also float to both left and right) if that affects the result in any way.
Link to JSFiddle: http://jsfiddle.net/FERNX/
try
#floater{
margin-top: 25%;
}
or
position: absolute;
top: 50%;
margin-top: -25%;
if you know it's height the most east and straightforward solution is:
#page-wrap { position: absolute; height: 900px; top: 50%; margin-top: -450px; }
basically it says; position its top at 50% and substract half its height to have the div's center centered.
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.