So I made JsFidle link and I'm troubled about relative and absolute positiong. So I made absolute div called top. I've got relative long (wide) blue panel with title that is positionend properly - top 0px. but when i'm making 2nd div in div id=top it has relative positioning top=70px (70 px is size of wide blue panel above). Sounds okey, right? But it isn't. I have no idea why It has so bad positoning . its relative to div="top" div, right? So why it moves so to bottom. Help please.
#top {
position: absolute;
top:0;
height:420px;
#panel {
margin:auto;
position:relative;
top:0px;
#panel-pic {
position: relative;
top: 70px;
height:350px;
background-color:black;
background-position: center;
background-size:cover;
box-shadow: 1px 1px 9px black;
}
panel-pic goes wrong!
I think you're mixing the two. :)
The parent should be relative and all elements you want to place relative-ly to it, should be absolute.
So just change #top's position to relative, and all others to absolute.
under #panel-pic p {
margin-top: 175px;
should be
margin-top: 0px;
working example: http://jsfiddle.net/gy3FU/7/
Related
Im just trying to put my footer exactly below one div with 100% width but if I use position:absolute its not going to be 100% width.
.box {
width:100%;
left:0%;
height:700px;
position:absolute;
margin-top:6%;
background-image:url();
background-position-y:90%;
background-position-x:50%;
}
.footer {
background-color:#ffffff;
width:100%;
height:90px;
position:absolute;
bottom:-30%;
left:0%;
box-shadow:0px -5px 0px 0px #c72031;
}
HTML:
<div class="box"></div>
<div class="footer"></div>
https://jsfiddle.net/opj984j7/
Just put the footer inside the box and give it bottom: 0; to display without any margin from the bottom. Or to display below, reduce bottom of the footers height bottom: -90px;:
.box {
width: 100%;
left: 0%;
height: 700px;
position: absolute;
margin-top: 6%;
background: #000;
}
.footer {
background-color: #ffffff;
width: 100%;
height: 90px;
position: absolute;
bottom: -90px;
left: 0%;
box-shadow: 0px -5px 0px 0px #c72031;
}
<div class="box">
<div class="footer"></div>
</div>
Absolute Position: This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left bottom and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning. If there is no
such parent, it will default all the way back up to the element
itself meaning it will be placed relatively to the page itself. The
trade-off, and most important thing to remember, about absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn't affect other elements. This
is a serious thing to consider every time you use absolute
positioning. It's overuse or improper use can limit the flexibility of
your site.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I have a div container where i want to put two images, one above the other, where the only visible image will be the one checked. I give my container position:relative and my imgs position:absolute;, so it will be absolute in relation to the container. But instead, all the content of the figure tag are going away from the container, and i don't know why.
Here's what i have: https://jsfiddle.net/rckecf2b/1/
If I understand you correctly, you need to have the div have the absolute position and the images relative to the parent, like so
When something has an absolute position, it ignores other set positions. If you want to have the positions seem absolute within a div, you need them to be relative
#container-fim-ap{
border:solid 5px #ABB7B7;
width:50%;
word-wrap:break-word;
border-radius:2%;
/*visibility: hidden;*/
position:absolute;
height:auto;
}
#container-fim-ap figure{
position: relative;
left:0;
}
https://jsfiddle.net/rckecf2b/3/
play around with it a little
Well it turns out that givin' height:200px to #container-fim-ap solved the problem.
#container-fim-ap{
border:solid 5px #ABB7B7;
width:80%;
word-wrap:break-word;
border-radius:2%;
/*visibility: hidden;*/
position:relative;
height: 200px;
http://jsfiddle.net/rckecf2b/2/ Thanks for the help everybody.
if you pass your mouse over the image on this jsfiddle, it does not overlap the text around it.
pretty dumb question, but i am very confused, could someone help me?
http://jsfiddle.net/wdhf2/
the image has this css:
.img {
height:30px;
-webkit-transition-duration:0.5s;
transition-duration:0.5s;
margin-bottom:0px;
margin-right:0px;
z-index:100000000;
}
.img:hover {
height:300px;
margin-bottom:-270px;
margin-right:-270px;
}
z-index can be applied only to positioned elements. Here's a fiddle with an image covering all the text after it has been positioned absolutely: http://jsfiddle.net/hb8f2/. Using position: relative or position: fixed also allows application of z-index.
.img {
position: absolute;
}
I encounter an error while positioning an element.
Browsers calculate the positions of the elements by looking at their top-left corner.
Lets say that point (top-left corner) "basis" (sorry about the terminology)
When i am using alignment or center object, it works fine. But if, i change an element's position with other attributes, lets say width:%50 and height:%50, browser does not move the element to the middle, it moves the "basis" of the element to the middle.
Is there way to change this "basis" to an other location of the element?
For example, can i make the "basis" of the element right-bottom corner?
I think I see what you're trying to ask. In short the answer is no. However if you use absolute positioning, and take a look at this quick test:
HTML
<div class="wrap">
<div class="absolute">
</div>
</div>
CSS
.wrap {
position: relative;
width:400px; height:400px;
background: red; }
.absolute {
position: absolute;
bottom:0; right:0;
width:100px; height:100px;
background: blue; }
You should see that div.absolute is positioned based on it's bottom right corner. Absolute positioning can be used in this way. See the fiddle here: http://jsfiddle.net/3RqSS/
Otherwise, you need to use a combination of absolute positioning and margins to center things. E.g.
.absolute {
position: absolute;
top:50%; left:50%;
width:100px; height:100px;
margin-left: -50px;
margin-top: -50px;
background: blue; }
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>