I have a design that requires an absolute positioned object on the top of the page. (menu inside of a circle)
Then about 5 row later (using foundation) I have a second absolute positioned element. But its position is based on the previous element because once you apply position: absolute to one element, you’ll usually find yourself applying it to everything else. So even if the rows are positioned relative by default, it doesn't reset the absolute position, so the element is floating to the beginning of the page.
I can position it but if I add an element I have to touch up the CSS so this is not good.
So how do you reset absolute position, I tried to have elements before my second element static and the other absolute but it does not work.
The first element is based on this Gist, then later the code is:
.or {
position: absolute;
background-image: url(../assets/img/OR.svg);
top: 50%;
left: 50%;
margin: -42px;
width: 84px;
height: 84px;
background-size: 84px 84px;
z-index: 50;
}
That's it for the HTML
<div class="row" data-equalizer>
<div class="small-6 columns text-center">
<div class="panel " data-equalizer-watch>
this is the content
</div>
</div>
<div class="or" > OR</div>
<div class="small-6 columns text-center">
<div class="panel" data-equalizer-watch>
this is the content
</div>
</div>
</div>
This is the Or part that need to be centered no matter the content on the side here it is regular but not on all the page
The solution was simple (like always) is is to put relative to the parent div
Related
I'm attempting to stack divs (styled to look like sticky-notes) so that part of the divs on the bottom hang out. I initially considered okay, I'll just style the top-most div as normally, and then only style the parts that you can see with the bottom divs (as opposed to making all divs the same width+height and stacking them). The issue is that I also want to style the border-radius of all divs the same, and if I do it the non-stacking way, then border-radius applied to the top div doesn't yield the same design as any border-radius applied to the bottom divs (because the width+height is different for the top div, I'm guessing).
<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>
Is there a way to fix the border-radius issue without resizing the divs to all be the same width+height?
If I were to resize the divs to all be the same width+height, how can I stack them? It seems that position:relative and z-index combination on the divs won't work because position:relative created a new container block, thus somehow making the z-index not work with the other divs' new container blocks.
If I were you, I'd:
add another class called stickynote and find all the common style (in this case border-radius) and apply the class to all of them
I'm not sure what you mean by stacking them -- when I read your initial paragraph, I thought you meant stack them vertically on the y axis, but seemingly, you're struggling with z-axis, so it seems like you want to stack them on the z axis. In which case, I'd put all three of them in a container, position that container relative, and position the three stickynote absolute, with different z-index, but identical x/y position.
Please do the following for better scalability:
Use a common class.
Close the </div> correctly.
Check the snippet.
Snippet
.stickynote {
position: absolute;
background: #0f0;
border: 1px solid #f90;
border-radius: 5px;
padding: 10px;
width: 75px;
top: 10px;
left: 10px;
}
.stickynote + .stickynote {
top: 20px;
left: 20px;
}
.stickynote + .stickynote + .stickynote {
top: 30px;
left: 30px;
}
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
Joomla-based website with DIV sections dividing the page within the template.
I need to display a graphic that displays on top of all content on the page. Using position: relative or position: absolute, it only adjusts the position within the current DIV section.
Using position: fixed, I am able to set its actual position, which is great. However, regardless of my z-index, some DIVs it appears above, others behind.
At a loss as to how to display this image over top of everything on the screen regardless as to its DIV, z-index, etc.
Use position absolute but adjust changes caused by not displaying img in that flow by for eg margin, padding, height etc. If you are floating img you will need to fix position too.
<div>
<div>before img</div>
<img class="img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute-fix">after img</div>
</div>
.img--absolute{
position: absolute;
}
.absolute-fix{
margin-top: 70px;
}
<div class="img-container--float-fix">beffor img</div>
<div>before img</div>
<img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute--float-fix">after img</div>
</div>
.img-container--float-fix{
position: relative;
}
.absolute--float-fix{
padding-right: 60px;
}
.img--float.img--absolute{
right: 0;
}
http://jsfiddle.net/o5sboe1s/
I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
I have the HTML:
<div class="arrow" id="link1">
<img class="bellow" src="bottom.jpg" width="305" height="229" />
</div>
And the CSS:
.arrow {
display: block;
width: 305px;
height: 229px;
z-index: 10;
position: relative;
background-image: url(top.png);
}
#link1 {
background-position: 0 458PX;
z-index: 10;
position: absolute;
}
#link1:hover {
background-position: 0 229px;
z-index: 10;
position: absolute;
}
.bellow {
z-index: 1;
position: absolute;
}
But the background-image is not showing up on top of the bottom.jpg what is wrong with the z-index?
You cannot position an element inside a parent element to be behind that parent element.
Consider an HTML structure like so:
<div class="level-1">
<div class="level-2">
<div class="level-3"></div>
<div class="level-3"></div>
</div>
<div class="level-2">
<div class="level-3"></div>
<div class="level-3"></div>
</div>
</div>
<div class="level-1">
<div class="level-2">
<div class="level-3"></div>
<div class="level-3"></div>
</div>
<div class="level-2">
<div class="level-3"></div>
<div class="level-3"></div>
</div>
</div>
I've conveniently named each division with a level-class to easier understand.
Z-indexing works by applying that z-index to other elements within each parent. So being on the root element, the z-index for each level-1 division would only apply to other level-1 divisions. Just like a level-2 index would only apply to another level-2 index, and the same with a level-3 index.
So indexing from inside out: the level-3 indices would be ordered first under each of their parents. Note that their z-index would not apply to other level-3 elements in other parents, only other elements under the same parent. Once ordering of those level-3 elements is done, they are placed into their level-2 parent. At that point, the level-2 elements get ordered based on their indices relative to their parent, and then placed into their parent the same way the level-3 elements were, and then the level-1 elements are done.
So the way your HTML structure is set up, with an image inside of a division, that image cannot appear underneath its parent. Structurally, that doesn't make sense anyways. A child is meant to be contained within a parent, it should never stack with its parent. If you really want to place the image behind the division, it should be place outside of the parent and positioned accordingly.
Having said that, there is a bit of a hackish workaround, but it requires removing the position: absolute from the parent division and using a negative z-index.
body (or any other positioned parent element) is the reference for
both the child and and parent element
source: z-index between Children and Parents
This means the z-index on your parent also applies to the child element. Where the child element(image) will also take z-index: 10;. With the parent and child both have a z-index of 10, the child will actually be rendered over the parent.
To fix this you should not even give a z-index to the parent, but only to the child(the image):
.bellow {
z-index: -1;
position:absolute;
}
Where the image will have a lower value as the default value, thus will be underneath its parent.
jsFiddle
z-index works with absolute/fixed/relative positions only.
Write:
.arrow{position:relative;}
Also,
Remove image out of div.
It should work.
Fiddle here.
Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.
Don't use absolutely-positioned elements for layouts since that elements are removed from normal flow and no longer affect elements around them. And they're not affected by other elements.
Use absolute-positioning to move elements within a container when conditions allow.
For floated elements I suggest you to use a specific clearing technique called clearfix. I use it religiously.
http://nicolasgallagher.com/micro-clearfix-hack/
http://jsfiddle.net/necolas/K538S/
Had same question, made all absolute positioned, but let the first one be relative, as for responsive layout where height does change, it did help to keep track of the elements height changes, notice in this case all elements have same height:
.gallery3D-item {
position: absolute;
top: 0;
left: 0;
}
.gallery3D-item:first-of-type {
position: relative;
display: inline-block;
}
I discovered a easy solution to this, it might not cover all possible problems but at least it solved my problem.
HTML:
<p>Content before</p>
<div class="offset-wrapper">
<div class="regular">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
<div class="special">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
</div>
<p>Content after</p>
CSS:
.offset-wrapper {
background: green;
position: relative;
width: 100px;
}
.offset-wrapper .regular {
visibility: hidden;
}
.offset-wrapper .special {
bottom: -15px;
left: -15px;
position: absolute;
}