%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Mehrere Spalten
\usepackage{multicol}

%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-position.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
CSS-Position
\end{center}

\section*{display: block vs inline}
\begin{tabular}{l l}
\texttt{display: block}  & height und width können festgelegt werden\\
\texttt{display: inline} & height und width werden ignoriert\\
\texttt{display: inline-block} & verhält sich wie inline-Element, height und width können festgelegt werden
\end{tabular}

\section*{position: Boxes positionieren}
\subsection*{Art der Positionierung}
\begin{tabular}{l l}
    \texttt{position: static}  & (Default)\\
    \texttt{position: relative}  & relativ zur normalen Position, normaler Platz bleibt reserviert\\
    \texttt{position: fixed}  & relativ zum Viewport (Browserfenter), normaler platz bleibt nicht reserviert\\
    \texttt{position: absolute}  & außerhalb des Flows, relativ zum Vorfahren-Element, das nicht static positioniert ist
\end{tabular}

\subsection*{Offset definieren}
\begin{tabular}{l l}
    \texttt{top | bottom}  & \\
    \texttt{left | right}  & 
\end{tabular}

\section*{z-index: Überlappende Boxes}
\begin{tabular}{l l}
    \texttt{z-index: <Zahl>}  & Je größer, desto top
\end{tabular}

\section*{overflow: Inhalt passt nicht in Box}
\begin{tabular}{l l}
    \texttt{overflow: visible}  & (Default) Inhalt wird trozdem angezeigt\\
    \texttt{overflow: hidden}  & Inhalt wird nicht angezeigt  \\
    \texttt{overflow: scroll}  & immer Scrollbars  \\
    \texttt{overflow: auto}  & Scrollbars bei Bedarf
\end{tabular}

	
\end{document}
