{"id":281,"date":"2023-10-09T22:29:08","date_gmt":"2023-10-09T20:29:08","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=281"},"modified":"2024-02-05T07:30:22","modified_gmt":"2024-02-05T06:30:22","slug":"zobrazenie-pozicia-a-obtekanie","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=281","title":{"rendered":"Zobrazenie, poz\u00edcia a obtekanie"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">Sp\u00f4sob zobrazenia \u2013 display<\/span><\/h2>\n<div id=\"node-396\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<p>Skryt\u00fd element na str\u00e1nke nezaber\u00e1 \u017eiadne miesto.<\/p>\n<pre>h1 {display: inline;} \/* zobraz\u00ed sa ako riadkov\u00fd element *\/\r\n#menu a {display: block;} \/* zobraz\u00ed sa ako blokov\u00fd element *\/\r\n.hidden {display: none;} \/* nezobrazi sa *\/\r\n<\/pre>\n<h3>Vidite\u013enos\u0165 \u2013 visibility<\/h3>\n<p>Skryt\u00fd element na str\u00e1nke st\u00e1le zaber\u00e1 svoje miesto.<\/p>\n<pre>.skryt {visibility: hidden;}\r\n.zobrazit {visibility: visible;}\r\n<\/pre>\n<h3>Prete\u010denie \u2013 overflow<\/h3>\n<p>Ur\u010duje ak\u00fdm sp\u00f4sobom zaobch\u00e1dza\u0165 s obsahom, ktor\u00fd sa do elementu nezmest\u00ed:<\/p>\n<ul>\n<li>visible \u2013 pretekaj\u00faci obsah sa zobraz\u00ed<\/li>\n<li>hidden \u2013 pretekaj\u00faci obsah sa nezobraz\u00ed<\/li>\n<li>scroll \u2013 posuvn\u00edky sa zobrazia v\u017edy<\/li>\n<li>auto \u2013 posuvn\u00edky sa zobrazia iba v pr\u00edpade nutnosti<\/li>\n<\/ul>\n<pre>pre {\r\n  width: 556px;\r\n  font-size: 13px;\r\n  overflow: auto;\r\n}\r\n<\/pre>\n<p>Samostatne je mo\u017en\u00e9 zad\u00e1va\u0165 aj jednotliv\u00e9 smery:<\/p>\n<pre>p {\r\n  width: 100px;\r\n  height: 100px;\r\n  overflow-y: auto;\r\n  overflow-x: scroll;\r\n}<\/pre>\n<h3>Poz\u00edcia \u2013 position<\/h3>\n<p>Umiestnenie ka\u017ed\u00e9ho elementu v r\u00e1mci dokumentu m\u00f4\u017ee by\u0165 statick\u00e9 (predvolen\u00e9), relat\u00edvne, absol\u00fatne alebo fixn\u00e9.\u00a0Umiestnenie sa vz\u0165ahuje v\u017edy k obsahov\u00e9mu bloku elementu.<\/p>\n<p><strong>Statick\u00e9 poz\u00edciovanie<\/strong>\u00a0\u00a0\u2013 static:<\/p>\n<ol>\n<li>Obsahov\u00fdm blokom je najbli\u017e\u0161\u00ed nadraden\u00fd blokov\u00fd element.<\/li>\n<li>Blok elementu je umiestnen\u00fd v r\u00e1mci be\u017en\u00e9ho toku dokumentu (pod\u013ea zdrojov\u00e9ho k\u00f3du).<\/li>\n<\/ol>\n<p><strong>Relat\u00edvne poz\u00edciovanie<\/strong>\u00a0\u00a0\u2013 relative:<\/p>\n<ol>\n<li>Obsahov\u00fdm blokom je najbli\u017e\u0161\u00ed nadraden\u00fd blokov\u00fd element.<\/li>\n<li>Blok elementu je posunut\u00fd z p\u00f4vodn\u00e9ho umiestnenia jedn\u00fdm alebo viacer\u00fdmi smermi.<\/li>\n<li>P\u00f4vodn\u00fd priestor po elemente zostane zachovan\u00fd.<\/li>\n<li>Nov\u00e1 poz\u00edcia elementu neovplyvn\u00ed poz\u00edciu in\u00e9ho elementu.<\/li>\n<\/ol>\n<p><strong>Absol\u00fatne poz\u00edciovanie<\/strong>\u00a0\u00a0\u2013 absolute:<\/p>\n<ol>\n<li>Obsahov\u00fdm blokom je najbli\u017e\u0161\u00ed nadraden\u00fd poziciovan\u00fd element <strong>v inom ako statickom<\/strong>\u00a0umiestnen\u00ed.<\/li>\n<li>Blok elementu je vybrat\u00fd z be\u017en\u00e9ho toku dokumentu, kde uvo\u013en\u00ed miesto nasleduj\u00facim elementom a presunie sa na ur\u010den\u00fa poz\u00edciu vzh\u013eadom na svoj obsahov\u00fd blok.<\/li>\n<li>V novej poz\u00edcii blok nijako neovplyv\u0148uje in\u00e9 elementy.<\/li>\n<\/ol>\n<p><strong>Fixn\u00e9 poz\u00edciovanie<\/strong>\u00a0\u00a0\u2013 fixed:<\/p>\n<ol>\n<li>Obsahov\u00fdm blokom je zobrazovacia oblas\u0165 prehliada\u010da.<\/li>\n<li>Blok elementu je vybrat\u00fd z be\u017en\u00e9ho toku dokumentu, kde uvo\u013en\u00ed miesto nasleduj\u00facim elementom a presunie sa na ur\u010den\u00fa poz\u00edciu vzh\u013eadom na svoj obsahov\u00fd blok.<\/li>\n<li>Blok zostane v novej poz\u00edcii aj pri posune obsahu prehliada\u010da.<\/li>\n<\/ol>\n<p><span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span>\u00a0vyhodnocuje fixn\u00e9 umiestnenie ako absol\u00fatne.<img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/angry_smile.gif\" alt=\"\" \/><\/p>\n<pre>img {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%; \/* lav\u00fd roh sa umiestni na stred nadraden\u00e9ho elementu *\/\r\n}\r\n<\/pre>\n<h3>Horn\u00e1 vzdialenos\u0165 \u2013 top<\/h3>\n<p>Vzdialenos\u0165 horn\u00e9ho vonkaj\u0161ieho okraja relat\u00edvne alebo absol\u00fatne poziciovan\u00e9ho elementu od horn\u00e9ho vn\u00fatorn\u00e9ho okraja nadraden\u00e9ho elementu.<\/p>\n<pre>#links {\r\n  position: absolute;\r\n  top: 0;\r\n}<\/pre>\n<h3>Prav\u00e1 vzdialenos\u0165 \u2013 right<\/h3>\n<p>Vzdialenos\u0165 prav\u00e9ho vonkaj\u0161ieho okraja relat\u00edvne alebo absol\u00fatne poziciovan\u00e9ho elementu od prav\u00e9ho vn\u00fatorn\u00e9ho okraja nadraden\u00e9ho elementu.<\/p>\n<pre>#menu {\r\n  position: absolute;\r\n  right: 0;\r\n}<\/pre>\n<h3>Spodn\u00e1 vzdialenos\u0165 \u2013 bottom<\/h3>\n<p>Vzdialenos\u0165 spodn\u00e9ho vonkaj\u0161ieho okraja relat\u00edvne alebo absol\u00fatne poziciovan\u00e9ho elementu od spodn\u00e9ho vn\u00fatorn\u00e9ho okraja nadraden\u00e9ho elementu.<\/p>\n<pre>#footer {\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n<\/pre>\n<h3>\u013dav\u00e1 vzdialenos\u0165 \u2013 left<\/h3>\n<p>Vzdialenos\u0165 \u013eav\u00e9ho vonkaj\u0161ieho okraja relat\u00edvne alebo absol\u00fatne pozicovan\u00e9ho elementu od \u013eav\u00e9ho vn\u00fatorn\u00e9ho okraja nadraden\u00e9ho elementu.<\/p>\n<pre>#menu {\r\n  position: absolute;\r\n  left: 10px;\r\n}\r\n<\/pre>\n<h3>Vrstva \u2013 z-index<\/h3>\n<p>Umiestnenie absol\u00fatne poziciovan\u00e9ho elementu do vzdialenej\u0161ej (ni\u017e\u0161ie \u010d\u00edslo) alebo bli\u017e\u0161ej vrstvy (vy\u0161\u0161ie \u010d\u00edslo).<\/p>\n<pre>h1 img {\r\n  position: absolute;\r\n  top: 10px;\r\n  left: 10px;\r\n  z-index: 1;\r\n}\r\n#links {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 2;\r\n}\r\n<\/pre>\n<h3>Orez \u2013 clip<\/h3>\n<p>Ore\u017ee absol\u00fatne poziciovan\u00fd element.<\/p>\n<pre>img {\r\n  position: absolute;\r\n  clip: rect(10px auto auto auto); \/* s\u00faradnice z \u013eav\u00e9ho horn\u00e9ho\r\n   rohu *\/\r\n}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/whatchutalkingabout_smile.gif\" alt=\"\" \/>\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\">IE6-<\/span>\u00a0nevie oreza\u0165 pozadie, ale iba obsah elementu<\/p>\n<h3>Pl\u00e1vaj\u00face poz\u00edcie \u2013 float<\/h3>\n<ol>\n<li>Obsahov\u00fdm blokom je najbli\u017e\u0161\u00ed nadraden\u00fd blokov\u00fd element.<\/li>\n<li>Blok elementu je mo\u017en\u00e9 umiestni\u0165 v\u013eavo alebo vpravo v r\u00e1mci obsahov\u00e9ho bloku.<\/li>\n<li>Nasleduj\u00facemu obsahu je umo\u017enen\u00e9, aby element v pl\u00e1vaj\u00facom umiestnen\u00ed obtekal sprava alebo z\u013eava.<\/li>\n<li>Pl\u00e1vaj\u00faci blok elementu sa sna\u017e\u00ed umiestni\u0165 \u010do mo\u017eno najviac v r\u00e1mci svojho obsahov\u00e9ho bloku.<\/li>\n<li>V novej poz\u00edcii pl\u00e1vaj\u00faci blok ovplyv\u0148uje poz\u00edcie nasleduj\u00facich elementov v norm\u00e1lnom toku dokumentu.<\/li>\n<li>P\u00f4vodn\u00e1 poz\u00edcia je uvo\u013enen\u00e1 pre \u010fal\u0161ie elementy.<\/li>\n<\/ol>\n<p>Hodnoty:<\/p>\n<ul>\n<li>left \u2013 umiestni element v\u013eavo a umo\u017en\u00ed \u010fal\u0161iemu obsahu, aby ho obtekal sprava<\/li>\n<li>right \u2013 umiestni element vpravo a umo\u017en\u00ed \u010fal\u0161iemu obsahu, aby ho obtekal z\u013eava<\/li>\n<li>none \u2013 be\u017en\u00fd tok dokumentu (zru\u0161enie pl\u00e1vaj\u00facej poz\u00edcie)<\/li>\n<\/ul>\n<pre>img {  \r\n  width: 100px; \/* definovan\u00e1 z\u00e1palka je nutnou podmienkou *\/\r\n  float: right;\r\n}\r\n<\/pre>\n<h3>Ukon\u010denie obtekania \u2013 clear<\/h3>\n<p>Ur\u010duje stranu, z ktorej sa ukon\u010d\u00ed obtekanie.<\/p>\n<pre>.clear {clear: both;}\r\n.clear-left {clear: left;}\r\n.clear-right {clear: right;}\r\n<\/pre>\n<h3>Pr\u00edklad \u0161tylovania prvku\u00a0<strong>blockquote<\/strong><\/h3>\n<pre>&lt;blockquote&gt;\r\n  &lt;p&gt;Text text text text...&lt;\/p&gt;\r\n  &lt;div&gt;Autor: &lt;cite&gt;Jan Werich&lt;\/cite&gt;&lt;\/div&gt;\r\n&lt;\/blockquote&gt;<\/pre>\n<pre>blockquote {\r\n  position: relative;\r\n  text-align: justify;\r\n}\r\nblockquote p:before,\r\nblockquote p:after {\r\n  position: relative;\r\n  display: block;\r\n  height: 40px;\r\n  width: 40px;\r\n  content: '\u201e';\r\n  font-size: 60px;\r\n  color: #eee;\r\n}\r\nblockquote p:before {\r\n  float: left;\r\n  margin: -46px 0 0 -45px;\r\n}\r\nblockquote p:after {\r\n  float: right;\r\n  margin: -18px -50px 0 0;\r\n  content: '\u201c';\r\n}<\/pre>\n<h3>St\u013apce<\/h3>\n<p>Rozdelenie obsahu (napr. ne\u010d\u00edslovan\u00e9ho zoznamu) na definovan\u00fd po\u010det st\u013apcov<\/p>\n<pre>ul.columns3 {\r\n  -moz-column-count:3; \/* Firefox *\/\r\n  -webkit-column-count:3; \/* Safari a Chrome *\/\r\n  column-count:3;\r\n\r\n  -moz-column-gap:40px; \/* Firefox *\/\r\n  -webkit-column-gap:40px; \/* Safari a Chrome *\/\r\n  column-gap: 40px;\r\n\r\n  -moz-column-rule:4px outset #f00; \/* Firefox *\/\r\n  -webkit-column-rule:4px outset #f00; \/* Safari a Chrome *\/\r\n  column-rule:4px outset #f00;\r\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sp\u00f4sob zobrazenia \u2013 display Skryt\u00fd element na str\u00e1nke nezaber\u00e1 \u017eiadne miesto. h1 {display: inline;} \/* zobraz\u00ed sa ako riadkov\u00fd element *\/ #menu a {display: block;} \/* zobraz\u00ed sa ako blokov\u00fd element *\/ .hidden {display: none;} \/* nezobrazi sa *\/ Vidite\u013enos\u0165 \u2013 visibility Skryt\u00fd element na str\u00e1nke st\u00e1le zaber\u00e1 svoje miesto. .skryt {visibility: hidden;} .zobrazit {visibility: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-281","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=281"}],"version-history":[{"count":4,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/281\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/281\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}