{"id":10723,"date":"2022-09-24T19:00:37","date_gmt":"2022-09-24T13:30:37","guid":{"rendered":"http:\/\/jassweb.com\/solved\/solved-position-sticky-css\/"},"modified":"2022-09-24T19:00:37","modified_gmt":"2022-09-24T13:30:37","slug":"solved-position-sticky-css","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/","title":{"rendered":"[Solved] POSITION STICKY CSS"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-55053672\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"55053672\" data-parentid=\"55053567\" data-score=\"2\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>If you want to avoid such overlap you need to consider more container where you wrap each date add its messages in the same container. Doing this, the previous day will scroll before the next one become sticky<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>* {\r\n  margin: 0px;\r\n  padding: 0px;\r\n}\r\n\r\n.chat {\r\n  overflow: auto;\r\n  border: solid 1px black;\r\n  left: 50%;\r\n  background-color: #e5ddd5;\r\n  z-index: 100;\r\n  height: 500px;\r\n  width: 500px;\r\n}\r\n\r\n.box {\r\n  width: 300px;\r\n  margin: 30px auto;\r\n  padding: 20px;\r\n  text-align: center;\r\n  font-weight: 400;\r\n  color: black;\r\n  font-family: arial;\r\n  position: relative;\r\n  border-radius: 20px;\r\n}\r\n\r\n.box.enviado {\r\n  background: #dcf8c6;\r\n}\r\n\r\n.box.recebido {\r\n  background: white;\r\n}\r\n\r\n.recebido:before {\r\n  content: \"\";\r\n  width: 0px;\r\n  height: 0px;\r\n  position: absolute;\r\n  border-left: 10px solid white;\r\n  border-right: 10px solid transparent;\r\n  border-top: 10px solid white;\r\n  border-bottom: 10px solid transparent;\r\n  left: 19px;\r\n  bottom: -19px;\r\n}\r\n\r\n.enviado:before {\r\n  content: \"\";\r\n  width: 0px;\r\n  height: 0px;\r\n  position: absolute;\r\n  border-left: 10px solid transparent;\r\n  border-right: 10px solid #dcf8c6;\r\n  border-top: 10px solid #dcf8c6;\r\n  border-bottom: 10px solid transparent;\r\n  right: 19px;\r\n  bottom: -19px;\r\n}\r\n\r\n.data {\r\n  background-color: rgba(225, 245, 254, 0.92);\r\n  color: rgba(69, 90, 100, 0.95)!important;\r\n  padding: 5px 12px 6px 12px!important;\r\n  border-radius: 7.5px!important;\r\n  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13)!important;\r\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4)!important;\r\n  margin-bottom: 8px!important;\r\n  margin-top: 8px!important;\r\n  margin-right: auto!important;\r\n  margin-left: auto!important;\r\n  max-width: 75px;\r\n  opacity: 0.8;\r\n  z-index: 2;\r\n}\r\n\r\n.data {\r\n  top: 10px;\r\n  position: sticky;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;div class=\"chat\"&gt;\r\n  &lt;div&gt;\r\n    &lt;div class=\"data\"&gt;05\/03\/2019&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;Ol\u00e1&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;Oi, tudo bem ?&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div&gt;\r\n    &lt;div class=\"data\"&gt;06\/03\/2019&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;Tudo bem!&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;e voce ?&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;Tudo bem tambem&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;preciso de ajuda&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;Voce pode me ajudar&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div&gt;\r\n    &lt;div class=\"data\"&gt;07\/03\/2019&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;Talvez sim&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;O que voce precisa&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;Como posso utilizar o position:sticky ?&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;Deixe-me ver&lt;\/div&gt;\r\n    &lt;div class=\"box enviado\"&gt;Acho que posso te ajudar&lt;\/div&gt;\r\n    &lt;div class=\"box recebido\"&gt;Certo&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved POSITION STICKY CSS <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] If you want to avoid such overlap you need to consider more container where you wrap each date add its messages in the same container. Doing this, the previous day will scroll before the next one become sticky * { margin: 0px; padding: 0px; } .chat { overflow: auto; border: solid 1px black; left: &#8230; <a title=\"[Solved] POSITION STICKY CSS\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/\" aria-label=\"More on [Solved] POSITION STICKY CSS\">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-10723","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] POSITION STICKY CSS - 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-position-sticky-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] POSITION STICKY CSS - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] If you want to avoid such overlap you need to consider more container where you wrap each date add its messages in the same container. Doing this, the previous day will scroll before the next one become sticky * { margin: 0px; padding: 0px; } .chat { overflow: auto; border: solid 1px black; left: ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-24T13:30:37+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-position-sticky-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] POSITION STICKY CSS\",\"datePublished\":\"2022-09-24T13:30:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/\"},\"wordCount\":48,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/\",\"name\":\"[Solved] POSITION STICKY CSS - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-24T13:30:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-position-sticky-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] POSITION STICKY CSS\"}]},{\"@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\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] POSITION STICKY CSS - 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-position-sticky-css\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] POSITION STICKY CSS - JassWeb","og_description":"[ad_1] If you want to avoid such overlap you need to consider more container where you wrap each date add its messages in the same container. Doing this, the previous day will scroll before the next one become sticky * { margin: 0px; padding: 0px; } .chat { overflow: auto; border: solid 1px black; left: ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/","og_site_name":"JassWeb","article_published_time":"2022-09-24T13:30:37+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-position-sticky-css\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] POSITION STICKY CSS","datePublished":"2022-09-24T13:30:37+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/"},"wordCount":48,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/","url":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/","name":"[Solved] POSITION STICKY CSS - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-24T13:30:37+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-position-sticky-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] POSITION STICKY CSS"}]},{"@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\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","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\/10723","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=10723"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/10723\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=10723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=10723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=10723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}