{"id":26873,"date":"2024-11-14T15:23:42","date_gmt":"2024-11-14T14:23:42","guid":{"rendered":"https:\/\/www.digitizer.rs\/news-stories\/positioning-elements-in-css\/"},"modified":"2024-11-14T15:43:51","modified_gmt":"2024-11-14T14:43:51","slug":"positioning-elements-in-css","status":"publish","type":"post","link":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/","title":{"rendered":"Positioning elements in CSS"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1616420482830{padding-top: 20px !important;padding-bottom: 30px !important;}&#8221;][vc_column][vc_column_text css=&#8221;.vc_custom_1616420457534{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">One of the main dilemmas when <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.digitizer.rs\/en\/services-digitizer\/website-design\/\" target=\"_blank\" rel=\"noopener\">creating a website<\/a><\/span> is the positioning of elements in <em>CSS<\/em> . This is where a CSS <em>property<\/em> called <em>position comes to the rescue.<\/em> It helps us manipulate the location of the element. <\/span><\/p>\n<p><span style=\"color: #333333;\">We can add the following six values \u200b\u200bto <em>the position<\/em> CSS property:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><em>static<\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>relative<\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>absolutely<\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>fixed  <\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>sticky  <\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>inherit<\/em><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h1><span style=\"color: #ff6600;\"><strong>Positioning elements in <em>CSS<\/em><\/strong><\/span><\/h1>\n<p><span style=\"color: #333333;\">Below we&#8217;ll explain each of these values, which are used to position elements in CSS, in more detail.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong> <\/strong><\/span><\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Absolutely<\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\">This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. Use the positioning attributes up, left, down, and right to set the location. Remember that these values \u200b\u200bwill be relative to the next parent element with relative (or absolute) positioning. If no such parent exists, it will default back to the element itself&lt; html&gt; , which means it will be placed relative to the page itself.   <\/span><\/p>\n<p><span style=\"color: #333333;\">The trade-off (and the most important thing to remember) with absolute positioning is that these elements are removed from the flow of elements on the page. Other elements do not affect an element with this type of positioning and do not affect other elements. This is a serious matter to consider any time you use absolute positioning. Its overuse or improper use can limit the flexibility of your website.   <\/span><\/p>\n<p><span style=\"color: #333333;\">If the child element has an absolute value, then the parent element will behave as if the child is not there at all.<\/span><\/p>\n<p><span style=\"color: #333333;\">In the image you can see two <em>divs<\/em> with height and width of 100 px. As you know, a div is <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.digitizer.rs\/en\/news-stories\/what-are-block-and-inline-elements-in-html-and-css\/\" target=\"_blank\" rel=\"noopener\"><em>a block<\/em> element<\/a><\/span> , and that&#8217;s why the squares ( <em>divs<\/em> ) are positioned one below the other. <\/span>[\/vc_column_text][vc_single_image image=&#8221;23867&#8243; css_animation=&#8221;fadeIn&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1616339800985{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; img_hover=&#8221;fade-out&#8221;][vc_column_text css=&#8221;.vc_custom_1616340792426{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">If we gave the lower (green square) element <em>position: absolut<\/em> , top:0, left:0 values, it would behave as in the picture below.<\/span>[\/vc_column_text][vc_single_image image=&#8221;23868&#8243; css_animation=&#8221;fadeIn&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1616339872603{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; img_hover=&#8221;fade-out&#8221;][vc_column_text css=&#8221;.vc_custom_1616341610581{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">The element is positioned relative to the document itself outside of any flow of <em>the html<\/em> page. It should be remembered that if this <em>giant<\/em> (green square) was located in an element, it would be positioned relative to it. Of course, if that element has <em>an absolute<\/em> or <em>relative<\/em> position.  <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Fixed  <\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\"><em>A fixed<\/em> value is similar to an absolute value in that it can help you position the element anywhere relative to the document, but the offset does not affect this value. From which it follows that this element will remain fixed in relation to the side. No matter how you scroll up and down with the mouse, the element stays where it was before we moved the page flow.  <\/span><\/p>\n<p><span style=\"color: #333333;\"><strong> <\/strong><\/span><\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Sticky<\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\"><em>Sticky<\/em> value is like a compromise between relative and fixed value. This is currently an experimental value, meaning it is not part of the official specification and is only partially accepted by selected browsers. In other words, it&#8217;s probably not the best idea to use this on a live production site.  <\/span><\/p>\n<p><span style=\"color: #333333;\">What is he doing? Well, it allows you to position an element relative to anything in the document, and then when the user moves past a certain point in the viewport it fixes the position of the element at that location so that it remains displayed as a fixed-value element. <\/span><\/p>\n<p><span style=\"color: #333333;\">Let&#8217;s take the following example:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">.element {<\/span><\/p>\n<p><span style=\"color: #333333;\">Position:sticky;<\/span><\/p>\n<p><span style=\"color: #333333;\">top: 50px;<\/span><\/p>\n<p><span style=\"color: #333333;\">}<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The element will be positioned relatively until the scroll position of the viewport reaches the point where the element is 50 pixels from the top of the viewable area. At that point the element becomes sticky and stays in a fixed position at the top of the 50px screen. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Relatives<\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\">This type of positioning is probably the most confusing. What it really means is &#8220;by itself.&#8221; If you set <em>position relative<\/em> on an element, but without any other positioning attributes (top, left, bottom, or right), it will not affect its positioning at all. It will stand exactly as it would have if you had left it as position: <em>static<\/em> ; But if you give it another positioning attribute, say top:30px, it will move its position 30 pixels down from where it would normally be. We will show this in the next photo.    <\/span>[\/vc_column_text][vc_single_image image=&#8221;23869&#8243; css_animation=&#8221;fadeIn&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1616340037763{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; img_hover=&#8221;fade-out&#8221;][vc_column_text css=&#8221;.vc_custom_1616340913956{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">We&#8217;re sure you can imagine that being able to move an element based on its regular position is quite useful. We can use this option to align form elements that tend not to line up the way we want them to. There are two other things that happen when we set the position: relative to the element that you should be aware of. One is that it introduces the ability to use a z-index on that element, which doesn&#8217;t work with statically positioned elements. Even if you don&#8217;t set a z-index value, this element will now appear on top of any other statically positioned element. You cannot combat this by setting a higher z-index value on a statically positioned element.     <\/span>[\/vc_column_text][vc_single_image image=&#8221;23870&#8243; css_animation=&#8221;fadeIn&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1616340080786{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; img_hover=&#8221;fade-out&#8221;][vc_column_text css=&#8221;.vc_custom_1616341222116{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">The second thing that happens is that it limits the range of absolutely set children. Any element that is subordinate to a relatively positioned element can be absolutely positioned within that block. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Static<\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\">This is the default for each individual page element. Different elements don&#8217;t have different default values \u200b\u200bfor positioning, they all start as static. Static doesn&#8217;t mean much; it just means that the element will enter the page as usual. The only reason you would ever set an element to position: <em>static<\/em> ; is to forcefully remove some positioning that has been applied to an element outside of your control.   <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #ff6600;\"><strong>Inherit<\/strong><\/span><\/h2>\n<p><span style=\"color: #333333;\">Inheriting positioning explicitly sets the value of the parent (if the parent is position: <em>absolute<\/em> , the child will be position: <em>absolute<\/em> ; if the parent is position: fixed , the child will be position: fixed ).<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><span style=\"font-weight: 400;\">For more news and interesting stories from digital marketing,<\/span> <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.digitizer.rs\/en\/news-stories\/\"><span style=\"font-weight: 400;\">visit our blog page<\/span><\/a><\/span> <span style=\"font-weight: 400;\">or<\/span> <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.instagram.com\/webdigitizer\/\"><span style=\"font-weight: 400;\">follow our Instagram profile.<\/span><\/a><\/span><\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221;][vc_column][vc_single_image source=&#8221;external_link&#8221; custom_src=&#8221;https:\/\/www.digitizer.rs\/blog\/digitizer-line.jpg&#8221;][vc_column_text]<em><span style=\"color: #333333;\">Made by Milo\u0161 Stojanovi\u0107 &#8211; Senior Web Developer @Digitizer<\/span><\/em>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1587387018476{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;}&#8221;][vc_column][vc_btn title=&#8221;Back to News &amp; Stories&#8221; color=&#8221;black&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fa fa-bars&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.digitizer.rs%2Fnews-stories%2F|title:Back%20to%20NEWS%20%26amp%3B%20STORIES|&#8221;][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1616420482830{padding-top: 20px !important;padding-bottom: 30px !important;}&#8221;][vc_column][vc_column_text css=&#8221;.vc_custom_1616420457534{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]One of the main dilemmas when creating a website is the positioning of elements in CSS . This is where a CSS property called position comes to the rescue. It helps us manipulate the location of the element. We can add the&hellip;<\/p>\n","protected":false},"author":10,"featured_media":23871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4384],"tags":[4378,4388,4398,4403,4407,4380,4412,4376,4411],"post_series":[],"class_list":["post-26873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-content-en","tag-digital-en","tag-google-en","tag-internet-en","tag-online-en","tag-search-en-2","tag-web-design-en","tag-website-optimization-en-2","tag-wordpress-en","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Positioning elements in CSS - Digitizer<\/title>\n<meta name=\"description\" content=\"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Positioning elements in CSS - Digitizer\" \/>\n<meta property=\"og:description\" content=\"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Digitizer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdigitizer\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-14T14:23:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-14T14:43:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"535\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"nebojsa.radovanovic@digitizer.rs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Positioning elements in CSS - Digitizer\" \/>\n<meta name=\"twitter:description\" content=\"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nebojsa.radovanovic@digitizer.rs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/\"},\"author\":{\"name\":\"nebojsa.radovanovic@digitizer.rs\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/person\\\/25e8bb23e8c57d47a985e7a45c11a753\"},\"headline\":\"Positioning elements in CSS\",\"datePublished\":\"2024-11-14T14:23:42+00:00\",\"dateModified\":\"2024-11-14T14:43:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/\"},\"wordCount\":1278,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg\",\"keywords\":[\"content\",\"digital\",\"google\",\"internet\",\"online\",\"search\",\"web design\",\"website optimization\",\"wordpress\"],\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/\",\"name\":\"Positioning elements in CSS - Digitizer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg\",\"datePublished\":\"2024-11-14T14:23:42+00:00\",\"dateModified\":\"2024-11-14T14:43:51+00:00\",\"description\":\"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg\",\"width\":1024,\"height\":535},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/positioning-elements-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"News &#038; Stories\",\"item\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Positioning elements in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\",\"name\":\"Digitizer\",\"description\":\"Google Ads - Social - Email Marketing - Web Design - Video Editing\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\",\"name\":\"Digitizer\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg\",\"width\":1000,\"height\":466,\"caption\":\"Digitizer\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/webdigitizer\",\"https:\\\/\\\/www.instagram.com\\\/webdigitizer\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@webdigitizer\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/digitizer\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/person\\\/25e8bb23e8c57d47a985e7a45c11a753\",\"name\":\"nebojsa.radovanovic@digitizer.rs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"caption\":\"nebojsa.radovanovic@digitizer.rs\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Positioning elements in CSS - Digitizer","description":"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.","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:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/","og_locale":"en_US","og_type":"article","og_title":"Positioning elements in CSS - Digitizer","og_description":"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.","og_url":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/","og_site_name":"Digitizer","article_publisher":"https:\/\/www.facebook.com\/webdigitizer","article_published_time":"2024-11-14T14:23:42+00:00","article_modified_time":"2024-11-14T14:43:51+00:00","og_image":[{"width":1024,"height":535,"url":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg","type":"image\/jpeg"}],"author":"nebojsa.radovanovic@digitizer.rs","twitter_card":"summary_large_image","twitter_title":"Positioning elements in CSS - Digitizer","twitter_description":"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.","twitter_misc":{"Written by":"nebojsa.radovanovic@digitizer.rs","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#article","isPartOf":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/"},"author":{"name":"nebojsa.radovanovic@digitizer.rs","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/person\/25e8bb23e8c57d47a985e7a45c11a753"},"headline":"Positioning elements in CSS","datePublished":"2024-11-14T14:23:42+00:00","dateModified":"2024-11-14T14:43:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/"},"wordCount":1278,"publisher":{"@id":"https:\/\/www.digitizer.rs\/en\/#organization"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg","keywords":["content","digital","google","internet","online","search","web design","website optimization","wordpress"],"articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/","url":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/","name":"Positioning elements in CSS - Digitizer","isPartOf":{"@id":"https:\/\/www.digitizer.rs\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#primaryimage"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg","datePublished":"2024-11-14T14:23:42+00:00","dateModified":"2024-11-14T14:43:51+00:00","description":"One of the main dilemmas when creating a website is the positioning of elements in CSS. Learn how to make the most of these values \u200b\u200bin CSS.","breadcrumb":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#primaryimage","url":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg","contentUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-pozicioniranje-elemenata-u-css.jpg","width":1024,"height":535},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/positioning-elements-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitizer.rs\/en\/"},{"@type":"ListItem","position":2,"name":"News &#038; Stories","item":"https:\/\/www.digitizer.rs\/en\/news-stories\/"},{"@type":"ListItem","position":3,"name":"Positioning elements in CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.digitizer.rs\/en\/#website","url":"https:\/\/www.digitizer.rs\/en\/","name":"Digitizer","description":"Google Ads - Social - Email Marketing - Web Design - Video Editing","publisher":{"@id":"https:\/\/www.digitizer.rs\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitizer.rs\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitizer.rs\/en\/#organization","name":"Digitizer","url":"https:\/\/www.digitizer.rs\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitizer.rs\/pictures\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg","contentUrl":"https:\/\/www.digitizer.rs\/pictures\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg","width":1000,"height":466,"caption":"Digitizer"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdigitizer","https:\/\/www.instagram.com\/webdigitizer\/","https:\/\/www.tiktok.com\/@webdigitizer","https:\/\/www.linkedin.com\/company\/digitizer"]},{"@type":"Person","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/person\/25e8bb23e8c57d47a985e7a45c11a753","name":"nebojsa.radovanovic@digitizer.rs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","caption":"nebojsa.radovanovic@digitizer.rs"}}]}},"_links":{"self":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts\/26873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/comments?post=26873"}],"version-history":[{"count":0,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts\/26873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/media\/23871"}],"wp:attachment":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/media?parent=26873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/categories?post=26873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/tags?post=26873"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/post_series?post=26873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}