{"id":31799,"date":"2023-01-24T20:11:48","date_gmt":"2023-01-24T14:41:48","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/"},"modified":"2023-01-24T20:11:48","modified_gmt":"2023-01-24T14:41:48","slug":"solved-problem-with-div-that-has-position-relative","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/","title":{"rendered":"[Solved] Problem with div that has position relative"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

OK. So, I know this is a hard thing to explain… but I’m guessing that you’re positioning the div for activity – something like position: relative<\/code> – and then also top: 672px<\/code><\/p>\n

relative positioning works by changing the position – ‘relative’ to its natural place in the flow. It also has the added effect of creating a positioning boundary for children that are positioned absolutely. But it’s not going to add page height or be tracked by scroll etc. It’s still where it started… you’ve just visually moved how the box is being displayed. What are you using it for? You can likely accomplish what you want – without relative positioning.<\/p>\n

To get closer to being able to answer you, here is an example of how I would write the layout you showed. (simplified)<\/p>\n

If you take a look at this jsFiddle (https:\/\/jsfiddle.net\/sheriffderek\/ny5hfa67<\/a>) – maybe you can amend it to show your issue.<\/p>\n

Here’s a resource to get the most out of your questions: https:\/\/stackoverflow.com\/help\/how-to-ask<\/p>\n<\/p>\n

\n
\n
.overview {\r\n  border: 1px solid red;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n}\r\n\r\n.overview .area {\r\n  border: 1px solid blue;\r\n  flex-basis: 50%;\r\n  padding: 1rem;\r\n}\r\n\r\n.activity {\r\n  position: relative; \/* so what? *\/\r\n  border: 1px solid green;\r\n}\r\n\r\n.activity .activity-list {\r\n  border: 1px solid orange;\r\n}\r\n\r\n.activity-list .link {\r\n  display: block;\r\n  padding: 1rem;\r\n}<\/code><\/pre>\n
<section class=\"overview\">\r\n\r\n  <aside class=\"area attendance\">\r\n    attendance\r\n  <\/aside>\r\n  \r\n  <aside class=\"area payments\">\r\n    payments\r\n  <\/aside>\r\n\r\n<\/section>\r\n\r\n\r\n<section class=\"activity\">\r\n  \r\n   <aside class=\"activity-list\">\r\n     <ul class=\"item-list\">\r\n       <li class=\"item\">\r\n         <a class=\"link\">item<\/a>\r\n       <\/li>\r\n       <li class=\"item\">\r\n         <a class=\"link\">item<\/a>\r\n       <\/li>\r\n     <\/ul>\r\n   <\/aside>\r\n  \r\n<\/section><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Problem with div that has position relative <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] OK. So, I know this is a hard thing to explain… but I’m guessing that you’re positioning the div for activity – something like position: relative – and then also top: 672px relative positioning works by changing the position – ‘relative’ to its natural place in the flow. It also has the added effect … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-31799","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] Problem with div that has position relative - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Problem with div that has position relative - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] OK. So, I know this is a hard thing to explain… but I’m guessing that you’re positioning the div for activity – something like position: relative – and then also top: 672px relative positioning works by changing the position – ‘relative’ to its natural place in the flow. It also has the added effect ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-24T14:41:48+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Problem with div that has position relative\",\"datePublished\":\"2023-01-24T14:41:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\"},\"wordCount\":194,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\",\"name\":\"[Solved] Problem with div that has position relative - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-24T14:41:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Problem with div that has position relative\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Problem with div that has position relative - JassWeb","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:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Problem with div that has position relative - JassWeb","og_description":"[ad_1] OK. So, I know this is a hard thing to explain… but I’m guessing that you’re positioning the div for activity – something like position: relative – and then also top: 672px relative positioning works by changing the position – ‘relative’ to its natural place in the flow. It also has the added effect ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/","og_site_name":"JassWeb","article_published_time":"2023-01-24T14:41:48+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Problem with div that has position relative","datePublished":"2023-01-24T14:41:48+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/"},"wordCount":194,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/","url":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/","name":"[Solved] Problem with div that has position relative - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-24T14:41:48+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-problem-with-div-that-has-position-relative\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Problem with div that has position relative"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/31799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=31799"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/31799\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=31799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=31799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=31799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}