sticky position CSS React - css

I don't know why position: sticky doesn't work on my website.
Position: fixed works, but then my navbar and leftMenu are hidden under others components..
CSS
.NavBar{
padding: 0 15px 0 0px;
background-color: #6E81FB;
margin: 0px;
box-sizing: border-box;
height: 70px;
text-align: left;
display: flex;
line-height: 70px;
align-items: center;
border-bottom: 2px solid #575353;
position: sticky;
}
.UnloggedLeftMenu{
height: calc(100vh - 70px);
width: 70px;
background-color: #6E81FB;
padding: 20px 0 0 0;
border-right: 2px solid #575353;
box-sizing: border-box;
position: sticky;
}

#poldeeek, you should not use position: sticky in your case because it does not involve toggling between relative and fixed positions.
It can easily be achieved by position: fixed and you would need to set the z-index in order to push the elements above the rest.
Following is the CSS-
.NavBar{
padding: 0 15px 0 0px;
background-color: #6E81FB;
margin: 0px;
box-sizing: border-box;
height: 70px;
text-align: left;
display: flex;
line-height: 70px;
align-items: center;
border-bottom: 2px solid #575353;
position: fixed;
top: 0;
left: 0; right: 0; //To stretch the navbar full width
z-index: 99;
}
.UnloggedLeftMenu{
width: 70px;
background-color: #6E81FB;
padding: 20px 0 0 0;
border-right: 2px solid #575353;
box-sizing: border-box;
position: fixed;
left: 0;
top: 70px; bottom: 0; //To take the height excluding header; No need to specify height explicitly
z-index: 99;
}
body {
padding: 70px 0 0 70px; //To avoid hiding of main content
}
Hope this helps!

Related

sticky position not working in the nav bar

My css:
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
nav{
width: 80vw;
height: 10vw;
background-color: black;
border: 2px red solid;
position: sticky;
top: 0;
}
li{
color: white;
padding: 2vh;
display: inline-block;
font-size: 5vw;
}
.nothing{
height: 100px;
width: 100px;
border: 2px brown solid;
}
My navbar isnt sticking to the top even though there is no overflow element anywhere (which causes problems in this case i think) and top: 0 is also mentioned. Why is this?

Radial Box Shadow on Fixed element

I'm trying to add kind of "radial box shadow" to a div.
I use a ::before pseudo-element and Z-index to achieve it.
See a simplified fiddle here.
Problem : while it works fine when the element's position is either relative or absolute, the z-index rule doesn't seem to apply when position is set to fixed.
Any idea how to make this work?
.statusBar {
position: absolute;
/*chnaging this to fixed will break the z-index*/
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position: absolute;
z-index: -1;
width: 96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
just wrap your statusBar to a div with the property of position: fixed. And make statusBar as position: relative.
<div class="container">
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
</div>
.container{
position: fixed;
width: 100%;
}
.statusBar {
position: relative; /*chnaging this to fix will */
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position:absolute;
z-index: -1;
width:96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
Hope this helps.

CSS only lightbox solution

I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?
Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }

css relative div height auto between two div

I try to have horizontal div to fill all the empty space of a container.
I didn't succeed to make the middle div (.element-description) to fill all empty gap (like in height: auto). (all other div have a defined height)
I tried with display:table, it near works but create some display bug in IE9.
I tried with css calc but it's not cross browser and it didn't solved all the problem.
I really don't know what to do. Maybe it's impossible in css?
css:
.element{
position: absolute;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 500px;
background: grey;
}
.element-back {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.title {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
line-height: 40px;
}
.element-title-separator {
position: relative;
overflow: hidden;
height: 2px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
position: relative;
overflow: hidden;
min-width: 100%;
height: 14.5%;
opacity: 0.8;
}
.element-image img{
position: absolute;
width: 100%;
height: auto;
margin-top: -30%;
}
.element-description {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.element-description > div{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.element.blog .element-description > div > div{
overflow: hidden;
position: absolute;
height:100%;
}
.element-read-more {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
.element-informations {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
fiddle without table
fiddle with display table
hope that someone can help me...
Why do you need to set position: absolute to the .element? Can't you set it to relative and use height: auto?
Is this what you're trying?
http://jsfiddle.net/jonigiuro/UuFSg/262/
.element{
position: relative;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: auto;
background: grey;
}
The fixed value here must be the header and footer height, and you need to set the top and bottom of your content section whit the same value of footer and header height plus the value of the border-width here (100px + 5px).
I hope it help
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
.box{
border: 5px solid green;
}
#container{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
min-width: 60%;
min-height: 400px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: none;
bor
}
/** Test html classic page */
#header{
display:block;
overflow: visible;
width: auto;
height: 100px;
margin: 0; padding: 0;
}
#content{
position: absolute;
/** The border over lap so 5px must be add*/
top: 105px; bottom: 105px;
right: 0; left: 0;
}
#footer{
position: absolute;
overflow: visible;
height: 100px;
right: 0; left: 0; bottom: 0;
margin: 0; padding: 0;
}

Floating modal window under a button

I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}

Resources