I have a CSS problem with a couple of parts. The first part is that I need an absolute positioned :after element to be visible above a fixed position element. The second part is that I need to be able to have a modal as a child of that fixed element that will cover the whole screen. Here's a simplified version of my app.
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
A codepen: https://codepen.io/winterblack/pen/ypBOqz
I can either have a z-index: -1 on my content element, or a z-index: 1 on my nav element. Either way, it gets in the way of the modal, which must have the content element a its parent.
The best solution I can think of right now is to use z-index: -1 on the content element, and remove it when the modal is opened. That will have the strange effect of having the absolute element disappear while the modal is opened...not too big of a deal probably, but not ideal. Any other ideas?
If you changed the position of content to relative, would that be an ok compromise for what you're trying?
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
Related
This must be really simple but I'm stuck.
I have a header and below I have a full height/width block that is absolutely positioned. This will be a map but I have just used a coloured block to make it simple.
On top of this background I need the page that is 100% height in the middle. I thought I could use the z-index to show this on top of the absolutely positioned background but the page is always behind the 'bg' div
I know I'm missing something simple
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
z-index has no effect on statically-positioned elements (which is the default). It affects relative, absolute and fixed ("positioned") elements. A common hack would be to add position:relative to your .page.
To force an absolute positioned element for indexing you could use it in negative.
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}