Is there a way to set a global margin to a page which will include absolutely and fixed positioned elements as well?
This is possible is you wrap these absolute / fixed elements with an element which has transforms set on them.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
body {
margin: 100px;
color: white;
transform: translateX(0);
border-top: 2px solid green;
}
.absolute, .fixed {
width: 100px;
height: 100px;
top: 0;
}
.absolute {
position: absolute;
background-color: red;
left: 0;
}
.fixed {
position: fixed;
background-color: blue;
right: 0;
}
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
Notice that, in the above snippet, both the absolute and the fixed element are positioned relative to the body with the margin.
Note:
1) I don't necessarily recommend using it this way as it will most probably cause confusion in the long run.
2) As #Temani Afif pointed out fixed elements will behave like absolute elements this way - so this technique may not work as expected depending on the context.
You can add margin to all elements with the wildcard selector, but then you'll spend a lot of time cancelling this out on internal elements. You can try something like body > * to add margin to top level elements.
body > * {
margin: 50px;
}
#abs {
position: absolute;
top: 0;
left: 0;
background: red;
width: 100px;
height: 100px;
}
#abs .inner {
position: absolute;
top: 0;
left: 0;
background: blue;
width: 50px;
height: 50px;
}
#fixed {
position: fixed;
bottom: 0;
right: 0;
background: green;
width: 100px;
height: 100px;
}
<div id="fixed"></div>
<div id="abs">
<div class="inner"></div>
<div>
Related
I have a partly transparent fixed footer and header with scrolling content: https://jsfiddle.net/ru8jgxg9/
What changes to that JSFiddle would need to be made to keep the vertical scroll bar on top when there is overflow content (but keep the scroll bar the whole height of the window too)?
I notice stackoverflow.com seems to be able to do it:
html {
height: 100%;
}
body {
height: 100%;
}
/* Fixed Header */
.dvTableTop {
display: table;
width: 100%;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #000000;
top: 0px;
height: 50px;
position: fixed;
left: 0;
right: 0;
opacity: 0.7;
background-color: Red;
z-index: 1030;
}
/* Scrollable Content */
.dvContentContainer1 {
position: fixed;
top: 0;
bottom: 0;
padding-top: 30px;
overflow: auto;
left: 0;
right: 0;
}
/* Fixed Footer */
.dvFooterContainer1 {
position: fixed;
height: 50px;
background-color: Yellow;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}
Your fixed header and footer needs to be inside the scrolling container. Currently, they're outside the content container and will overlap it and its scrollbar.
Also, your content container can't have a position: fixed, otherwise it will fight with other fixed elements for position and cause overlaps. Fixed elements are always relative to the document, not the container.
Below is a working example.
body {
margin: 0;
padding: 0;
font-family: arial, helvetica, san-serif;
}
.content {
height: 1000px;
background: linear-gradient(45deg, blue, red);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
<div class="content">
<div class="header">Header</div>
<div class="footer">Header</div>
</div>
I am confused why you are doing it that way. All you have to do is remove your position: fixed from your .dvContentContainer1 like so
.dvContentContainer1 {
padding-top: 30px;
}
And as long as the content extends past the bottom of the page it will work the way you are wanting it to.
See this updated fiddle
Edit: If you remove the height: 100%; from the body tag the scroll bar will go away if the content does not extend past the height of the screen.
See this updated fiddle 2
I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>
I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }
I have 3 elements, two on the same level, and one child, all having fixed position. I need to set the z-index properties to place the parent on the bottom, the element on the same level in the middle, and the child on top.
I've tried setting a higher z-index for the child, but it's not working.
<div class="red">
<div class="blue"></div>
</div>
<div class="green"></div>
Here is the case http://jsfiddle.net/udENm/21/ (I need red on the bottom, green in the middle and blue on top, still maintaining red and greenon the same level).
My CSS is like this
.red {
position: fixed;
z-index: 2;
}
.green {
position: fixed;
z-index: 2;
}
.blue {
position: fixed;
z-index: 5;
}
Set your positioning to absolute and remove the z-index from the parent div (the red one) entirely. http://jsfiddle.net/calder12/udENm/32/
.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}
The z-index property only has effect within the stacking context of the containing element.
Put another way, given a bunch of block elements within the same parent element, you can control their front to back ordering pretty easily. However, z-index can only control the front to back ordering within this parent element and not within the global context.
So, you can move .blue backwards and forwards within .red all you like. You can also switch .red and .green around in the z-plane all you like too. However, you can't put .green between .red and .blue because they are in different stacking contexts.
EDIT
Stacking context only applies to elements that are in the flow. If you use position:absolute, then you can do this. See Rick Calder's answer
The green blocks z-index needs to be lower than the red ones. I used this CSS instead of the one you posted:
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 1;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
top:50%;
left:50%;
z-index: 5;
width: 50px;
height: 50px;
}
Works fine, as you can see green is now z-index 1, red is z-index 2 and the blue block has absolute positioning.
Z-index is relative in a way to the parent. Red is already at 2, and blue is only at z-index 5 compared to it's siblings, but not to outside elements like Green.
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.
Kinda like this?
http://jsfiddle.net/kBv7R/
HTML
<div class="foo">
<div class="child"></div>
<div class="bar"></div>
</div>
CSS
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 5;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: fixed;
left: 90px;
top: 90px;
z-index: 6;
width: 50px;
height: 50px;
}