From 7ede35499ec8fd9b04b3710d14ca6dc1526d9764 Mon Sep 17 00:00:00 2001 From: bmen Date: Mon, 15 Apr 2019 00:29:44 +0000 Subject: [PATCH] =?UTF-8?q?'README.md'=20=C3=A4ndern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index c069807..9e534cc 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,27 @@ The Javascript Framework Jquery is used for this website. The javascript functio ## Overview CSS classes homepage ![Overview CSS classes homepage](https://git.bmen.eu/Projekte/oho/raw/master/doc/overview_css_classes_home.png) +## z-index +``` +.header { + z-index:1003; +} +.search-results-item:hover { + z-index:1002; +} +.row::before { + z-index:1001; +} +.row::after { + z-index:1001; +} +.searchbar { + z-index:1000; +} +.search-results-item { + z-index:999; +} +``` ## Row - Background and red lines (CSS line: 51-87) The rows who separating the content horizontally must be 100% wide. This means that the width restriction of the content must be made within the row. So the background color gradiation is in full width and the red lines are on the left and right side of the browser. @@ -23,4 +44,5 @@ The red lines are purely CSS and no additionaly HTML elements have to be created ``` ## Search results grid ![](https://git.bmen.eu/Projekte/oho/raw/master/doc/search-results-grid.png) + Because of the hover effect, the search result item (.search-results-item) must be absolutely positioned. Therefore, it is important that there is a grid element (.col-1-4) above the search result item which is relatively positioned. And it needs even a minimum height, because the absolutely positioned search result item falls from the HTML flow.