This is my site http://lostlegendsmc.net76.net/index.html. Is there any way to keep the absolutely positioned elements from moving when the screen size does. I have already tried to wrap them and that didn't work so I am completely stuck right now
You can wrap everything on a div with hard coded width and height and absolute positioning. If so, your elements will never move, assuming the parent that contains all the content is actually out of the document flow and has always the same size.
Absolute elements are absolute positioned in relation to its parent, so if the parent has an absolute position and a fixed width and height, it prevents its content from being moved as the screen size changes.
Hard coding the size and absolute positioning it is an option: http://jsfiddle.net/gespinha/f6zPy/1/
HTML
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
CSS
#wrapper {
width:1024px;
height:1024px;
position:absolute;
background:#00f;
}
#one, #two {
width:100px;
height:100px;
position:absolute;
}
#one {
background:#f00;
top:300px;
left:0;
}
#two {
background:#0f0;
top:500px;
right:0;
}
Related
example
I know this will be really simple but I'm stuck sorry.
I have a centered page with a width (the grey area in my example) and I want to have block behind it that is full width (the red area in my example).
The page needs to have a slight margin at the top to show the block behind it.
How can I have a full with block and have a page positioned on top.
I have it looking something like I want but thats with negative margin on the page area
You can use position absolute. But dont work with pixels. It is bad idea for mobile devices.
These code aligns div to center.
left:50%;
transform:translate(-50%,0);
.top{
width:100%;
height:100px;
background:red;
}
.inline-class{
height:200px;
width:90%;
background:grey;
position:absolute;
top:50px;
left:50%;
transform:translate(-50%,0);
}
<div class="top">
</div>
<div class="inline-class">İnline Class</div>
You could use position: absolute to position one element over another.
.page {
position: absolute;
left: 5%;
top: 50px;
}
position: absolute positions your element relative to it's first ancestor, so it basically ignores the position of it's siblings.
Is there any way or workflow that will allow you to see elements that are positioned partially (or wholly) outside the viewport of the browser while designing? Like you can with artboards in Illustrator?
For example: Say I have a rectangle positioned at {left: -50px} in the body (that's a minus in there), meaning that 50px worth of rectangle is outside the viewport. Is there any tool that will visually represent that?
A hack solution: Create a div to contain all the content of your website, but make the width < 100% so that you can see the content as it overflows into the body. Change the width as you like..
<div class="virtualize-overflow">
Normal Content
<div class="overflow">Overflowing content</div>
</div>
.virtualize-overflow{
display:block;
background-color:gray;
width:50%;
height:50%;
margin:auto;
margin-top:30%;
}
.overflow{
display:block;
width:250px;
height:100px;
margin-left:-100px;
background-color:red;
}
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
Here's the (simplified) scenario. I have a div which contains another div. The outer div is of fixed size, has scrollbars and relative positioning. The inner div is larger than and is positioned relative to the outer div. I want the inner div to be fully visible, "floating" above the outer div.
I appreciate this sounds artificial as there is no point in constraining the size of the outer div in this way. It is. In the real application though, there is other content inside the outer div which does need to be controlled with scrollbars.
How can I do this, using css alone? Please note, the inner div must be positioned relative to the external one, so using position:fixed is not an option.
Markup:
<div id="container">
<div id="popup">Popup Text</div>
</div>
Css:
#container{
overflow: scroll;
height:50px;
width:50px;
position:relative;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Here's a Plunker
You can add extra wrapper and set position: relative and overflow to different wrappers:
HTML
<div id="base">
<div id="container">
<div id="popup">Popup Text</div>
</div>
</div>
CSS
#base {
height:50px;
width:50px;
position:relative;
}
#container{
overflow: scroll;
height:100%;
width:100%;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Fiddle: http://jsfiddle.net/UGftq/
The "secret" is that the overflow property
...affects the clipping of all of the element's content except any
descendant elements (and their respective content and descendants)
whose containing block is the viewport or an ancestor of the element.
The containing block for absolutely positioned elements is the nearest ascestor with non-static position. Therefore, when element with overflow is not positioned itself, it doesn't clip absolutely positioned descendants.
I made this fiddle, I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper?
Guessing it should be simple, but I can't get it to work. I think I need to use relative. The 'bars' are time lines and 'float around' freely.
HTML:
<div class="wrapper" style="background:blue">
<div class="up" style="background:yellow"/>
<div class="down" style="background:red"/>
</div>
CSS:
.wrapper {
width:50px;
height:400px;
background:blue;
margin:1em;
}
.up {
position:relative;
top:100px; /*I want this one 100px from the top of .wrapper*/
height:100px;
}
.down {
position:relative;
top:200px; /*I want this one 200px from the top of .wrapper*/
height:50px;
}
position:relative relates to the previous div.
Div .up has height 100px, so to place .down directly below .up, .down should contain top:100px. Therefore, top:200px on .down will place it 200px below .up, which is not what you want as .up only has height 100px. Solve it by changing top attribute of .down to top:100px
If you want to position it relative to wraper, use position:absolute.
Demo: http://jsfiddle.net/6wSAJ/274
you dont need to set top:xx; if you want just to stack yellow and red
modify your html to be in format '<div></div>' rather than '<div />'