CSS Positioning allows you to apply specific positioning to HTML elements.
staticrelativeabsolutefixedStatic Position
Static CSS positioning is the default value of the position property.
.class{
position:static;
top: 100px; /*ignored*/
right:100px; /*ignored*/
}
Relative PositionPositions element relative to where it should be. It respects top, left, right and bottom. Content will not shift to take up the space.
.class{
position:relative;
top: 100px;
right:100px;
}
See the Pen UAITR-Relative Positioning by Jon (@Middaugh) on CodePen.
Fixed PositionFixed position elements are positioned based on the screen. Content will shift to take up the space the element would take up.
.class{
position:fixed;
top: 100px;
right:100px;
}
See the Pen UAITR-FixedPositioning by Jon (@Middaugh) on CodePen.
Absolute PositionAbsolute positioned elements are positioned based of the closest parent element that has a position that is not static. If no parent is found, it is positioned off the the document.
.class{
position:absolute;
top: 100px;
right:100px;
}
See the Pen UAITR-FixedPositioning by Jon (@Middaugh) on CodePen.
.horizantal{
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.vertical{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
See the Pen UAITR-FixedPositioning by Jon (@Middaugh) on CodePen.
Modals allow you to present a small amount of content to the user without navigating away from the screen.
Rotators provide interactive slide shows to users. They are frequently used to highlight important callouts or for featuring specific items.
your content
your content
your content
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});