Menu
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow-y:auto;
position:absolute;
top: 30px;
margin-left: -170px;
width: 400px;
height:400px;
z-index: 9999999;
display: none;
}
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle {
z-index: 1000;
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
text-align:left;
position:fixed; //Position Fixed working for the header
}
#notificationsBody {
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
width: 384px;
border-top: 1px solid #dddddd;
position:fixed; //Position Fixed Not Working
}
HTML
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div> //Notification Header
<div id="notificationsBody">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("HeaderMessage")%>' />
</td>
</tr>
<br />
<tr>
<td>
<a href="#"><asp:Label ID="Label2" runat="server" Text='<%#Eval("Message")%>'/></a></td>
</tr>
<br />
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text='<%#Eval("Time")%>' />
</td>
</tr>
<br />
<hr style="color:darkgray;" />
</ItemTemplate>
</asp:Repeater>
</div>
<div id="notificationFooter"><a href="#">See All</a></div> //Notification Footer
</div>
387
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element. Make sure that you using <footer> or any other block-level element to wrap the footer.
You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
#notificationFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
width: 384px;
border-top: 1px solid #dddddd;
position:fixed;
bottom: 0px;
}
add "bottom: 0px" to pull your element with fixed positioning to the bottom of the page. :) Side note: left, right & top can also be assigned a pixel value! eg "top: 5px"
139
You have to this too
bottom:0; //whatever you want to add
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
