I am learning some frontend development and came across this webpage example
It's a simple web page with the body made solely out of divs
This below is a fixed div, when I say fixed I mean when I resize the browser from the bottom or the left, right the div is not adjusted and it goes out of view.
<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>
while the one below is moving
<div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;">I could go on, but I think you see the brilliance of these things.</div>
both the divs have absolute positioning but the first or the fixed div has positioning for top defined as `
The only difference that I see is that first or the fixed as
top: 80px \\for fixed div
while it's
bottom: 100px \\for the moving div
My question is why only bottom attribute in css for this div puts it in another layer while top doesn't do the same for the fixed div? Or maybe there is something else to it?
Absolute positioning is dependent on its parent element. If the div is nested within another div with any positioning besides static(the default) then it will be displayed absolute to that div not the body or page. I am not sure what you mean by "layering". If you want to layer divs you can use z-index to put one above the other.
EDIT:
The top left corner of a browser always remain at 0,0 the only thing that changes on a resize is the bottom right coordinates
Related
I am having trouble creating this component for a project I'm working on. The requirements include a vertical bar where the text is rotated 90deg, horizontally centered within the bar, and aligned to the bottom of the bar. The screenshot below is what it's supposed to look like. I've linked to a codepen at the bottom to show you what I have so far.
Other Notes
I'd like to try and avoid absolute positioning if possible
The width of the actual title itself needs to be variable
When the window is made smaller I'd prefer it to cutoff from the bottom not the top (not a deal breaker)
Also keep in mind that I've set overflow-y: hidden on the <html> and <body> tags to keep vertical scrolling from happening.
Codepen example
This layout is a bit tricky to achieve without absolute positioning.
Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY
I've removed the content container, so your resulting HTML is now as follows,
<div class="c-key">
<div class="c-key__label">Some label</div>
<h1 class="c-key__title">
Milestones
</h1>
</div>
I've also updated your SCSS to use absolute positioning, as follows,
.c-key {
width:600px;
height: 600px;
position: relative; // make container use relative positioning
background: #000;
&__label {
background: #fff;
border-right: 1px solid #000;
font-size: 13px;
padding: .25rem .5rem;
text-transform: uppercase;
}
&__title {
color: #fff;
font-size: 5rem;
transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
transform-origin: left bottom; // rotate from bottom-left
position: absolute; // use absolute positioning with this element
bottom: 0; // position at bottom of parent element
left: 50%; // position at middle of parent element
margin: 0 !important; // remove default padding from header tag
}
}
I have three elements, the ones in red are divs with images as background displaying the logo of my client. The white one is a "modal" window that appears when you click an item on the menu (not displayed), this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally). The bottom of the modal as to be aligned with the two red boxes.. For my resolution it works perfect, but when on a Macbook (for example) when on fullscreen the site looks like this
What should I possibly do to solve this problem?
In case someone needs it, here's the CSS of the modal
.modal{
cursor: auto;
position: absolute;
z-index: 11;
top: 45px;
bottom: 15px;
right: 0;
left: 0;
margin: auto;
width: 940px;
max-width: 1072px;
height: 81%;
padding: 40px;
background-color: rgb(255, 255, 255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #1C1C1C;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
}
Remove the height property in your modal, You must just stretch your modal by using top and bottom. This will make sure the bottom of the modal is 15px from the bottom of the screen.
The bottom of the modal as to be aligned with the two red boxes..
Add the same Css rules to your red divs as well by using top and bottom
this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally)
If you say that the modal will be centered even vertically then howw do you expect the side red divs to align correctly at the bottom?
For this you must use jquery and when ever the modal is shown calculate the number of pixels from the bottom of the window to the bottom of the modal and then add this pixels as the CSS rule to both the side div's bottom property. That way you will get it aligned
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.