{"version":"1.0","provider_name":"blog website","provider_url":"https:\/\/www.etemkeskin.com","author_name":"etemkeskin","author_url":"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/","title":"CSS 'position' Property and Use Cases - blog website","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\"><a href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/\">CSS &#8216;position&#8217; Property and Use Cases<\/a><\/blockquote>\n<script type='text\/javascript'>\n<!--\/\/--><![CDATA[\/\/><!--\n\t\t\/*! This file is auto-generated *\/\n\t\t!function(d,l){\"use strict\";var e=!1,n=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var r,i,a,s=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),n=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),o=new RegExp(\"^https?:$\",\"i\"),c=0;c<n.length;c++)n[c].style.display=\"none\";for(c=0;c<s.length;c++)if(r=s[c],e.source===r.contentWindow){if(r.removeAttribute(\"style\"),\"height\"===t.message){if(1e3<(a=parseInt(t.value,10)))a=1e3;else if(~~a<200)a=200;r.height=a}if(\"link\"===t.message)if(i=l.createElement(\"a\"),a=l.createElement(\"a\"),i.href=r.getAttribute(\"src\"),a.href=t.value,o.test(a.protocol))if(a.host===i.host)if(l.activeElement===r)d.top.location.href=t.value}}},e)d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",t,!1),d.addEventListener(\"load\",t,!1);function t(){if(!n){n=!0;for(var e,t,r=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),i=!!navigator.userAgent.match(\/Trident.*rv:11\\.\/),a=l.querySelectorAll(\"iframe.wp-embedded-content\"),s=0;s<a.length;s++){if(!(e=a[s]).getAttribute(\"data-secret\"))t=Math.random().toString(36).substr(2,10),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t);if(r||i)(t=e.cloneNode(!0)).removeAttribute(\"security\"),e.parentNode.replaceChild(t,e)}}}}(window,document);\n\/\/--><!]]>\n<\/script><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/embed\/\" width=\"600\" height=\"338\" title=\"&#8220;CSS &#8216;position&#8217; Property and Use Cases&#8221; &#8212; blog website\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe>","description":"In CSS, position property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These;staticrelativeabsolutefixedsticky Now let's see what effect these 5 values have on HTML elements. To see these effects, I prepared the following Html codes that have 3 boxes element and parent element.","thumbnail_url":"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/image.png"}