{"id":3120,"date":"2017-08-06T20:35:27","date_gmt":"2017-08-06T17:35:27","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/css-position\/"},"modified":"2020-04-05T22:43:15","modified_gmt":"2020-04-05T19:43:15","slug":"css-position","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-position\/","title":{"rendered":"CSS position"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;CSS position&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;3.0.92&#8243; custom_padding=&#8221;0px|||&#8221; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; border_style=&#8221;solid&#8221;]Last lessons we were considering <a href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css-tuts\/html-block-layout\/\">html block<\/a> layout in detail &#8211; margin, padding. Also we were learning behavior and location of elements relative to each other.<\/p>\n<p>But how to dispose elements on the page without affecting the location other elements? For this purposes there is position rule. This rule has got four values &#8211; relative, absolute, fixed and static. In this lesson we&#8217;ll consider fixed position.<!--more--><\/p>\n<p>It is important to notice, applying of position is not enough. We must set coordinates of elements. There are four coordinates &#8211; top, left, right and bottom. Its values can be set in pixels or percentages.<br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=CXC7OEsg1YI&#8221; _builder_version=&#8221;3.0.47&#8243;][\/et_pb_video][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iSUU9ZWRnZSI+CiAgICA8dGl0bGU+PC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGUuY3NzIj4KPC9oZWFkPgo8Ym9keT4KCgo8aGVhZGVyPgogICAgPGgxPtCt0YLQviDRgdGD0L\/QtdGAINGB0LDQudGCINGBINC30LDRhNC40LrRgdC40YDQvtCy0LDQvdC90L7QuSDRiNCw0L\/QutC+0Lk8L2gxPgo8L2hlYWRlcj4KCgo8ZGl2IGlkPSJjb250ZW50Ij4KICAgIDxhIGhyZWY9IiMiPtCX0LDQutCw0LfQsNGC0Ywg0LfQstC+0L3QvtC6PC9hPgogICAgPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50LiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUXVpYnVzZGFtIG5lY2Vzc2l0YXRpYnVzIHJlcGVsbGUgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50Lm5kdXMgbGF1ZGFudGl1bSB2ZXJpdGF0aXMgdGVtcG9yaWJ1cyBoaWMgYSBzYWVwZSBjb25zZWN0ZXR1ciBlYSwgc29sdXRhIHZvbHVwdGFzIGFjY3VzYW50aXVtLCBjb21tb2RpIHJlY3VzYW5kYWUgdml0YWUgc2ltaWxpcXVlIGZ1Z2l0IG1vbGVzdGlhcyBpcHNhIHBhcmlhdHVyISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUGVyc3BpY2lhdGlzIGlsbG8gcHJvdmlkZW50LCBub2JpcyBtYWduaSwgbWF4aW1lLCB2b2x1cHRhdGlidXMgcXVpcyBhbmltaSBub24gYW1ldCBpbiBkaXN0aW5jdGlvLiBBbmltaSBxdWFzaSB2b2x1cHRhdHVtIGFkaXBpc2NpIGN1bXF1ZSwgYWNjdXNhbnRpdW0gcGVyc3BpY2lhdGlzLCBhY2N1c2FtdXMgYXQ\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEZWxlY3R1cyBxdWlzcXVhbSBxdWFlcmF0IHVsbGFtIG1hZ25hbSBhdCByZXBlbGxlbmR1cyBzdXNjaXBpdCByZXB1ZGlhbmRhZSBwb3NzaW11cyBtb2xlc3RpYWUgYW1ldCBhbGlxdWFtIHF1YWUgbmVjZXNzaXRhdGlidXMsIHF1YXNpIGVycm9yIGNvbW1vZGkgY3VscGEuIFBsYWNlYXQsIHF1YWUgZWl1cyEgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZvbHVwdGF0dW0gdml0YWUgY29tbW9kaSB0ZW5ldHVyLCBzdW50IG5lbW8sIHVsbGFtIHF1b2Qgc29sdXRhIHBvc3NpbXVzIHZlbmlhbSByZWljaWVuZGlzIGNvbnNlY3RldHVyIHZlbCBtb2xlc3RpYXMgZGljdGEgc2VxdWkgbW9kaSwgYXNwZXJpb3JlcyB2b2x1cHRhdGUgaXN0ZSBlaXVzLiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQXBlcmlhbSBxdWFlcmF0IG5vc3RydW0gbWludXMsIGVvcyBldCBzZWQsIG5vYmlzIGZhY2VyZSBkb2xvcmUsIHF1YWUgb2RpbywgYXNwZXJpb3JlcyBxdWlzIGF0IG5lY2Vzc2l0YXRpYnVzIGlwc3VtIHZlbGl0IGV4Y2VwdHVyaSBuZW1vIHRlbXBvcmlidXMgYW5pbWkuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIGl1c3RvIGRvbG9yIHNhcGllbnRlIHBlcmZlcmVuZGlzLiBEdWNpbXVzIGRvbG9yZXMgYXRxdWUgZmFjaWxpcywgc3VzY2lwaXQgY3VtcXVlIGRlbGVjdHVzIG9mZmljaWEgbGliZXJvLCBxdW9zLCBwcm92aWRlbnQgcXVvLCBxdWkgcXVpYSBldC4gVm9sdXB0YXR1bSwgc2FlcGU\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBJZCBub3N0cnVtIGFyY2hpdGVjdG8gbWFnbmFtIGFiIG5lbW8gZWl1cyBkb2xvcmlidXMgZmFjZXJlIHJlcGVsbGF0IHZvbHVwdGF0ZW0gbmloaWwsIG5lcXVlIGN1cGlkaXRhdGUuIEVzc2UgY29tbW9kaSB0ZW1wb3JlIHF1aSBwb3JybyBzaXQgcXVhcyBpbmNpZHVudC4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50LjwvcD4KPC9kaXY+CjwvYm9keT4KPC9odG1sPg==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iSUU9ZWRnZSI+CiAgICA8dGl0bGU+PC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGUuY3NzIj4KPC9oZWFkPgo8Ym9keT4KCgo8aGVhZGVyPgogICAgPGgxPtCt0YLQviDRgdGD0L\/QtdGAINGB0LDQudGCINGBINC30LDRhNC40LrRgdC40YDQvtCy0LDQvdC90L7QuSDRiNCw0L\/QutC+0Lk8L2gxPgo8L2hlYWRlcj4KCgo8ZGl2IGlkPSJjb250ZW50Ij4KICAgIDxhIGhyZWY9IiMiPtCX0LDQutCw0LfQsNGC0Ywg0LfQstC+0L3QvtC6PC9hPgogICAgPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50LiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUXVpYnVzZGFtIG5lY2Vzc2l0YXRpYnVzIHJlcGVsbGUgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50Lm5kdXMgbGF1ZGFudGl1bSB2ZXJpdGF0aXMgdGVtcG9yaWJ1cyBoaWMgYSBzYWVwZSBjb25zZWN0ZXR1ciBlYSwgc29sdXRhIHZvbHVwdGFzIGFjY3VzYW50aXVtLCBjb21tb2RpIHJlY3VzYW5kYWUgdml0YWUgc2ltaWxpcXVlIGZ1Z2l0IG1vbGVzdGlhcyBpcHNhIHBhcmlhdHVyISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUGVyc3BpY2lhdGlzIGlsbG8gcHJvdmlkZW50LCBub2JpcyBtYWduaSwgbWF4aW1lLCB2b2x1cHRhdGlidXMgcXVpcyBhbmltaSBub24gYW1ldCBpbiBkaXN0aW5jdGlvLiBBbmltaSBxdWFzaSB2b2x1cHRhdHVtIGFkaXBpc2NpIGN1bXF1ZSwgYWNjdXNhbnRpdW0gcGVyc3BpY2lhdGlzLCBhY2N1c2FtdXMgYXQ\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEZWxlY3R1cyBxdWlzcXVhbSBxdWFlcmF0IHVsbGFtIG1hZ25hbSBhdCByZXBlbGxlbmR1cyBzdXNjaXBpdCByZXB1ZGlhbmRhZSBwb3NzaW11cyBtb2xlc3RpYWUgYW1ldCBhbGlxdWFtIHF1YWUgbmVjZXNzaXRhdGlidXMsIHF1YXNpIGVycm9yIGNvbW1vZGkgY3VscGEuIFBsYWNlYXQsIHF1YWUgZWl1cyEgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZvbHVwdGF0dW0gdml0YWUgY29tbW9kaSB0ZW5ldHVyLCBzdW50IG5lbW8sIHVsbGFtIHF1b2Qgc29sdXRhIHBvc3NpbXVzIHZlbmlhbSByZWljaWVuZGlzIGNvbnNlY3RldHVyIHZlbCBtb2xlc3RpYXMgZGljdGEgc2VxdWkgbW9kaSwgYXNwZXJpb3JlcyB2b2x1cHRhdGUgaXN0ZSBlaXVzLiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQXBlcmlhbSBxdWFlcmF0IG5vc3RydW0gbWludXMsIGVvcyBldCBzZWQsIG5vYmlzIGZhY2VyZSBkb2xvcmUsIHF1YWUgb2RpbywgYXNwZXJpb3JlcyBxdWlzIGF0IG5lY2Vzc2l0YXRpYnVzIGlwc3VtIHZlbGl0IGV4Y2VwdHVyaSBuZW1vIHRlbXBvcmlidXMgYW5pbWkuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIGl1c3RvIGRvbG9yIHNhcGllbnRlIHBlcmZlcmVuZGlzLiBEdWNpbXVzIGRvbG9yZXMgYXRxdWUgZmFjaWxpcywgc3VzY2lwaXQgY3VtcXVlIGRlbGVjdHVzIG9mZmljaWEgbGliZXJvLCBxdW9zLCBwcm92aWRlbnQgcXVvLCBxdWkgcXVpYSBldC4gVm9sdXB0YXR1bSwgc2FlcGU\/IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBJZCBub3N0cnVtIGFyY2hpdGVjdG8gbWFnbmFtIGFiIG5lbW8gZWl1cyBkb2xvcmlidXMgZmFjZXJlIHJlcGVsbGF0IHZvbHVwdGF0ZW0gbmloaWwsIG5lcXVlIGN1cGlkaXRhdGUuIEVzc2UgY29tbW9kaSB0ZW1wb3JlIHF1aSBwb3JybyBzaXQgcXVhcyBpbmNpZHVudC4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFF1aWJ1c2RhbSBuZWNlc3NpdGF0aWJ1cyByZXBlbGxlbmR1cyBsYXVkYW50aXVtIHZlcml0YXRpcyB0ZW1wb3JpYnVzIGhpYyBhIHNhZXBlIGNvbnNlY3RldHVyIGVhLCBzb2x1dGEgdm9sdXB0YXMgYWNjdXNhbnRpdW0sIGNvbW1vZGkgcmVjdXNhbmRhZSB2aXRhZSBzaW1pbGlxdWUgZnVnaXQgbW9sZXN0aWFzIGlwc2EgcGFyaWF0dXIhIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBQZXJzcGljaWF0aXMgaWxsbyBwcm92aWRlbnQsIG5vYmlzIG1hZ25pLCBtYXhpbWUsIHZvbHVwdGF0aWJ1cyBxdWlzIGFuaW1pIG5vbiBhbWV0IGluIGRpc3RpbmN0aW8uIEFuaW1pIHF1YXNpIHZvbHVwdGF0dW0gYWRpcGlzY2kgY3VtcXVlLCBhY2N1c2FudGl1bSBwZXJzcGljaWF0aXMsIGFjY3VzYW11cyBhdD8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIERlbGVjdHVzIHF1aXNxdWFtIHF1YWVyYXQgdWxsYW0gbWFnbmFtIGF0IHJlcGVsbGVuZHVzIHN1c2NpcGl0IHJlcHVkaWFuZGFlIHBvc3NpbXVzIG1vbGVzdGlhZSBhbWV0IGFsaXF1YW0gcXVhZSBuZWNlc3NpdGF0aWJ1cywgcXVhc2kgZXJyb3IgY29tbW9kaSBjdWxwYS4gUGxhY2VhdCwgcXVhZSBlaXVzISBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXR1bSB2aXRhZSBjb21tb2RpIHRlbmV0dXIsIHN1bnQgbmVtbywgdWxsYW0gcXVvZCBzb2x1dGEgcG9zc2ltdXMgdmVuaWFtIHJlaWNpZW5kaXMgY29uc2VjdGV0dXIgdmVsIG1vbGVzdGlhcyBkaWN0YSBzZXF1aSBtb2RpLCBhc3BlcmlvcmVzIHZvbHVwdGF0ZSBpc3RlIGVpdXMuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBBcGVyaWFtIHF1YWVyYXQgbm9zdHJ1bSBtaW51cywgZW9zIGV0IHNlZCwgbm9iaXMgZmFjZXJlIGRvbG9yZSwgcXVhZSBvZGlvLCBhc3BlcmlvcmVzIHF1aXMgYXQgbmVjZXNzaXRhdGlidXMgaXBzdW0gdmVsaXQgZXhjZXB0dXJpIG5lbW8gdGVtcG9yaWJ1cyBhbmltaS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gaXVzdG8gZG9sb3Igc2FwaWVudGUgcGVyZmVyZW5kaXMuIER1Y2ltdXMgZG9sb3JlcyBhdHF1ZSBmYWNpbGlzLCBzdXNjaXBpdCBjdW1xdWUgZGVsZWN0dXMgb2ZmaWNpYSBsaWJlcm8sIHF1b3MsIHByb3ZpZGVudCBxdW8sIHF1aSBxdWlhIGV0LiBWb2x1cHRhdHVtLCBzYWVwZT8gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIElkIG5vc3RydW0gYXJjaGl0ZWN0byBtYWduYW0gYWIgbmVtbyBlaXVzIGRvbG9yaWJ1cyBmYWNlcmUgcmVwZWxsYXQgdm9sdXB0YXRlbSBuaWhpbCwgbmVxdWUgY3VwaWRpdGF0ZS4gRXNzZSBjb21tb2RpIHRlbXBvcmUgcXVpIHBvcnJvIHNpdCBxdWFzIGluY2lkdW50LjwvcD4KPC9kaXY+CjwvYm9keT4KPC9odG1sPg==[\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;Code lesson (CSS)&#8221; code=&#8221;aGVhZGVyIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNlMWUxZTE7CiAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICB3aWR0aDogMTAwJTsKICAgIHRvcDogMDsKfQoKI2NvbnRlbnQgewogICAgbWFyZ2luLXRvcDogMTAwcHg7Cn0KCiNjb250ZW50IHAgewogICAgZm9udC1zaXplOiAyMHB4Owp9CgphIHsKICAgIHBvc2l0aW9uOiBmaXhlZDsKICAgIGJvdHRvbTogMDsKICAgIGxlZnQ6IDUwJTsKICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAgIHBhZGRpbmc6IDE1cHg7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTY1MTc4OwogICAgY29sb3I6ICNmZmY7CiAgICBmb250LXdlaWdodDogYm9sZDsKfQ==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430 &#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]aGVhZGVyIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNlMWUxZTE7CiAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICB3aWR0aDogMTAwJTsKICAgIHRvcDogMDsKfQoKI2NvbnRlbnQgewogICAgbWFyZ2luLXRvcDogMTAwcHg7Cn0KCiNjb250ZW50IHAgewogICAgZm9udC1zaXplOiAyMHB4Owp9CgphIHsKICAgIHBvc2l0aW9uOiBmaXhlZDsKICAgIGJvdHRvbTogMDsKICAgIGxlZnQ6IDUwJTsKICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAgIHBhZGRpbmc6IDE1cHg7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTY1MTc4OwogICAgY29sb3I6ICNmZmY7CiAgICBmb250LXdlaWdodDogYm9sZDsKfQ==[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last lessons we were considering html block layout in detail &#8211; margin, padding. Also we were learning behavior and location of elements relative to each other. But how to dispose elements on the page without affecting the location other elements? For this purposes there is position rule. This rule has got four values &#8211; relative, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u0412 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u0443\u0440\u043e\u043a\u0430\u0445 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438 <a href=\"http:\/\/kamil-abzalov.com\/blochnaja-model-verstki\/\">\u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0435\u0440\u0442\u0441\u043a\u0438<\/a>, \u043a\u0430\u043a \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0438\u0437\u0443\u0447\u0430\u043b\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.\r\n\r\n\u041d\u043e \u043a\u0430\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u00a0\u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (position). \u042d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c 4 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f - relative, absolute, fixed \u0438 static. \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 (position:fixed)<!--more-->\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=CXC7OEsg1YI\r\n\r\n\u0412\u0430\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 position \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u043a\u043e\u0440\u0430\u0431\u043b\u0435\u0439 \u043d\u0430 \u043b\u0438\u0441\u0442\u0435 \u0431\u0443\u043c\u0430\u0433\u0438 \u0432 \u0438\u0433\u0440\u0435 \"\u041c\u043e\u0440\u0441\u043a\u043e\u0439 \u0431\u043e\u0439\"). \u0412 css \u0435\u0441\u0442\u044c 4 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b - top, left, right, bottom. \u0418\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445.\r\n\r\n<pre><code><!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <title><\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n\r\n<header>\r\n    <h1>\u042d\u0442\u043e \u0441\u0443\u043f\u0435\u0440 \u0441\u0430\u0439\u0442 \u0441 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439<\/h1>\r\n<\/header>\r\n\r\n\r\n<div id=\"content\">\r\n    <a href=\"#\">\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u0432\u043e\u043d\u043e\u043a<\/a>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus repellendus laudantium veritatis temporibus hic a saepe consectetur ea, soluta voluptas accusantium, commodi recusandae vitae similique fugit molestias ipsa pariatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo provident, nobis magni, maxime, voluptatibus quis animi non amet in distinctio. Animi quasi voluptatum adipisci cumque, accusantium perspiciatis, accusamus at? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quisquam quaerat ullam magnam at repellendus suscipit repudiandae possimus molestiae amet aliquam quae necessitatibus, quasi error commodi culpa. Placeat, quae eius! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum vitae commodi tenetur, sunt nemo, ullam quod soluta possimus veniam reiciendis consectetur vel molestias dicta sequi modi, asperiores voluptate iste eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat nostrum minus, eos et sed, nobis facere dolore, quae odio, asperiores quis at necessitatibus ipsum velit excepturi nemo temporibus animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor sapiente perferendis. Ducimus dolores atque facilis, suscipit cumque delectus officia libero, quos, provident quo, qui quia et. Voluptatum, saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nostrum architecto magnam ab nemo eius doloribus facere repellat voluptatem nihil, neque cupiditate. Esse commodi tempore qui porro sit quas incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus repelle Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus repellendus laudantium veritatis temporibus hic a saepe consectetur ea, soluta voluptas accusantium, commodi recusandae vitae similique fugit molestias ipsa pariatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo provident, nobis magni, maxime, voluptatibus quis animi non amet in distinctio. Animi quasi voluptatum adipisci cumque, accusantium perspiciatis, accusamus at? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quisquam quaerat ullam magnam at repellendus suscipit repudiandae possimus molestiae amet aliquam quae necessitatibus, quasi error commodi culpa. Placeat, quae eius! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum vitae commodi tenetur, sunt nemo, ullam quod soluta possimus veniam reiciendis consectetur vel molestias dicta sequi modi, asperiores voluptate iste eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat nostrum minus, eos et sed, nobis facere dolore, quae odio, asperiores quis at necessitatibus ipsum velit excepturi nemo temporibus animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor sapiente perferendis. Ducimus dolores atque facilis, suscipit cumque delectus officia libero, quos, provident quo, qui quia et. Voluptatum, saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nostrum architecto magnam ab nemo eius doloribus facere repellat voluptatem nihil, neque cupiditate. Esse commodi tempore qui porro sit quas incidunt.ndus laudantium veritatis temporibus hic a saepe consectetur ea, soluta voluptas accusantium, commodi recusandae vitae similique fugit molestias ipsa pariatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo provident, nobis magni, maxime, voluptatibus quis animi non amet in distinctio. Animi quasi voluptatum adipisci cumque, accusantium perspiciatis, accusamus at? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quisquam quaerat ullam magnam at repellendus suscipit repudiandae possimus molestiae amet aliquam quae necessitatibus, quasi error commodi culpa. Placeat, quae eius! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum vitae commodi tenetur, sunt nemo, ullam quod soluta possimus veniam reiciendis consectetur vel molestias dicta sequi modi, asperiores voluptate iste eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat nostrum minus, eos et sed, nobis facere dolore, quae odio, asperiores quis at necessitatibus ipsum velit excepturi nemo temporibus animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor sapiente perferendis. Ducimus dolores atque facilis, suscipit cumque delectus officia libero, quos, provident quo, qui quia et. Voluptatum, saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nostrum architecto magnam ab nemo eius doloribus facere repellat voluptatem nihil, neque cupiditate. Esse commodi tempore qui porro sit quas incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus repellendus laudantium veritatis temporibus hic a saepe consectetur ea, soluta voluptas accusantium, commodi recusandae vitae similique fugit molestias ipsa pariatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo provident, nobis magni, maxime, voluptatibus quis animi non amet in distinctio. Animi quasi voluptatum adipisci cumque, accusantium perspiciatis, accusamus at? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quisquam quaerat ullam magnam at repellendus suscipit repudiandae possimus molestiae amet aliquam quae necessitatibus, quasi error commodi culpa. Placeat, quae eius! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum vitae commodi tenetur, sunt nemo, ullam quod soluta possimus veniam reiciendis consectetur vel molestias dicta sequi modi, asperiores voluptate iste eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat nostrum minus, eos et sed, nobis facere dolore, quae odio, asperiores quis at necessitatibus ipsum velit excepturi nemo temporibus animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor sapiente perferendis. Ducimus dolores atque facilis, suscipit cumque delectus officia libero, quos, provident quo, qui quia et. Voluptatum, saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nostrum architecto magnam ab nemo eius doloribus facere repellat voluptatem nihil, neque cupiditate. Esse commodi tempore qui porro sit quas incidunt.<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n\r\n<pre><code>header {\r\n    background-color: #e1e1e1;\r\n    position: fixed;\r\n    width: 100%;\r\n    top: 0;\r\n}\r\n\r\n#content {\r\n    margin-top: 100px;\r\n}\r\n\r\n#content p {\r\n    font-size: 20px;\r\n}\r\n\r\na {\r\n    position: fixed;\r\n    bottom: 0;\r\n    left: 50%;\r\n    display: inline-block;\r\n    padding: 15px;\r\n    background-color: #e65178;\r\n    color: #fff;\r\n    font-weight: bold;\r\n}\r\n<\/code><\/pre>","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259,243],"class_list":["post-3120","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en","tag-html-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS position - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"CSS position. In this lesson it considers fixed position.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS position - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"CSS position. In this lesson it considers fixed position.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-06T17:35:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-05T19:43:15+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"CSS position\" \/>\n<meta name=\"twitter:description\" content=\"CSS position. In this lesson it considers fixed position.\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"CSS position\",\"datePublished\":\"2017-08-06T17:35:27+00:00\",\"dateModified\":\"2020-04-05T19:43:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/\"},\"wordCount\":2445,\"commentCount\":0,\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/\",\"name\":\"CSS position - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-06T17:35:27+00:00\",\"dateModified\":\"2020-04-05T19:43:15+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"CSS position. In this lesson it considers fixed position.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-pozicionirovanie-jelementov\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS position\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS position - Kamil Abzalov's blog","description":"CSS position. In this lesson it considers fixed position.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/","og_locale":"en_US","og_type":"article","og_title":"CSS position - Kamil Abzalov's blog","og_description":"CSS position. In this lesson it considers fixed position.","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-06T17:35:27+00:00","article_modified_time":"2020-04-05T19:43:15+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"CSS position","twitter_description":"CSS position. In this lesson it considers fixed position.","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"CSS position","datePublished":"2017-08-06T17:35:27+00:00","dateModified":"2020-04-05T19:43:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/"},"wordCount":2445,"commentCount":0,"keywords":["css","html"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/","name":"CSS position - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-06T17:35:27+00:00","dateModified":"2020-04-05T19:43:15+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"CSS position. In this lesson it considers fixed position.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-pozicionirovanie-jelementov\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS position"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3120"}],"version-history":[{"count":8,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3120\/revisions"}],"predecessor-version":[{"id":31208,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3120\/revisions\/31208"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}