I have an image with some circles on hands fingers in the image. I am placing glowing div on the image.
{
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
margin: 0 !important;
padding: 0 !important;
}
This is how I place glowing circle.
.small_rings_group {
position: absolute;
left: 25.3vw;
top: 10vh;
}
Its works perfect on window width change but when I change the height of the window, the placement changed.
1.) Use position: relative for the image to have it act as "position anchor" for the absolutely positioned elements.
2.) In the CSS of the absolutely positioned elements, don't use absolute values, but percentage values for left and top (will be in relation to the parent). This will keep the position responsive.
Related
I want to make this shopping cart's div follow the user's viewport (http://testshop.michaelkenji.com/), so I tried to simply injecting div { position:fixed} to it's stylesheet, it worked, but there are complications which I am here to ask.
Q: Given two fixed elements, and they collide, which one will be on top?
Q: How do I make an element be the absolute "top" (with only css)
When you want to overlap the element in top, you should use a higher z-index value for eg:
div{
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
div{/*this div will be on top layer of previous div*/
position: fixed;
top: 0;
width: 100%;
z-index: 2;/*because of higher z-index*/
}
I'm trying to create a document using HTML which when it's printed, adds a 'cover page' with a border. I have a div that's only visible with '#media print', but I can't figure out how to get that div to fill the page. Setting a height of 100% with position: absolute fills the entire document, not just that one page.
Is there a way of restricting the size of the div to just the current page? When I tried position: fixed, it did put it in the right place, but on every page. In essence, I need to find a way to set height to the viewport height, but maintain position: absolute.
For this purpose, I'm restricted to a solution compatible with IE8 only.
Give your html and body a height of 100% then the cover a height of 100% to get a cover height based on the viewport. Give the cover a position of absolute as well and position it.
body, html { height: 100%;
}
#cover { position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
If you do a div#cover like this:
#cover {
background-color: red;
position: absolute;
border: 3px solid blue;
box-sizing: border-box;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
#media print
{
#cover { display: block; }
}
Your first page will be red with a blue border (or whatever it contains in the div)
The top, left, right, bottom make it fit to the viewport.
The box-sizing make it incorporate the border size at the div content width/height.
Without your HTML it's not possible to help further than this.
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
I am looking to keep an element at the bottom of a sidebar. To achieve that, one of the easiest solution would be:
#container
{
position: relative;
height: 100%;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
The result of this code is going to be:
However, I also need to keep the sidebar responsive. And since an absolute position removes the #bottom-element from the flow, if the sidebar's height becomes too small, the #bottom-element is going to cover the blue elements, instead of creating a scrollbar.
So my question is:
How to keep the red element at the bottom of the sidebar, while keeping it at the bottom of the blue elements list when the sidebar is not tall enough?
Just add some bottom padding to the container equal to the height of the absolutely positioned element:
#container
{
position: relative;
height: 100%;
padding-bottom:20px;
box-sizing: border-box;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
Update you might also want to add box-sizing: border-box to stop the padding being added to the 100% height. I've updated the CSS with this.
Okay i'm trying to center some content, but, I want to keep the absolute attribute to keep the content within a certain height on the page, but at the same time, i want the content perfectly centered. How do I center it if absolute takes specific coordinates? Everyone has different sized monitors so giving the coordinates to center it will fail.
#logo {
position: absolute;
top: 25px;
left: 0px;
}
#logo {
position: absolute;
top: 25px;
width: 100px;
left: 50%;
margin-left:-50px;
}
Make the left position 50% and then give it a negative margin to pull it back by half the width.
Demo