{"id":287,"date":"2011-05-24T12:01:56","date_gmt":"2011-05-24T22:01:56","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=287"},"modified":"2020-05-03T16:44:10","modified_gmt":"2020-05-04T02:44:10","slug":"absolute-positioning-inside-float-or-relative","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/","title":{"rendered":"Absolute Positioning Inside Float or Relative"},"content":{"rendered":"<h2>Problem:<\/h2>\n<p>I have a gallery with varying images so I need to use float so that the images line up correctly. \u00a0The problem is that I need to display a shade over the image when the mouse goes over the image. \u00a0It needs to look like the images below. \u00a0The problem is that if I set the shade div as position:absolute, it is absolute to the document.<\/p>\n<figure id=\"attachment_293\" aria-describedby=\"caption-attachment-293\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-293 \" title=\"Before\" src=\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg\" alt=\"\" width=\"300\" height=\"195\" srcset=\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg 300w, https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg 387w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-293\" class=\"wp-caption-text\">Normal viewing<\/figcaption><\/figure>\n<figure id=\"attachment_292\" aria-describedby=\"caption-attachment-292\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/shade.jpg\"><\/a><figcaption id=\"caption-attachment-292\" class=\"wp-caption-text\">After mouse over<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>Solution:<\/h2>\n<p>The solution is to put in a &#8220;position:relative&#8221; into the floating div or the div that will contain the absolute element. \u00a0In other words the shade (with the absolute position) will have its coordinates relative to the image (the floating div). \u00a0Adding &#8220;position:relative&#8221; puts a position on the floating div and restricts the absolute positioning to within that div.<\/p>\n<p>&nbsp;<\/p>\n<pre>.person_cell {\n    position: relative;\n    float:left;\n    width:125px;\n    height:125px;\n    margin:3px;\n}\n.shade {\n    position:absolute;\n    left:0;\n    top:0;\n    background:black;\n    width:100%;\n    height:100%;\n    zoom:1;\n    opacity: 0.5;\n    filter: alpha(opacity = 50);\n}<\/pre>\n<p>Thanks to this <a title=\"Absolute Positioning inside relative\" href=\"http:\/\/www.west-wind.com\/weblog\/posts\/2008\/Mar\/28\/Absolute-Positioning-inside-of-a-Relative-Element-with-CSS\" target=\"_blank\" rel=\"noopener noreferrer\">post<\/a> for the info.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[17],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Absolute Positioning Inside Float or Relative - My Monkey Do<\/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:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Absolute Positioning Inside Float or Relative - My Monkey Do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/\" \/>\n<meta property=\"og:site_name\" content=\"My Monkey Do\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-24T22:01:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-04T02:44:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg\" \/>\n<meta name=\"author\" content=\"Webhead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webhead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/\",\"url\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/\",\"name\":\"Absolute Positioning Inside Float or Relative - My Monkey Do\",\"isPartOf\":{\"@id\":\"https:\/\/mymonkeydo.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg\",\"datePublished\":\"2011-05-24T22:01:56+00:00\",\"dateModified\":\"2020-05-04T02:44:10+00:00\",\"author\":{\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\"},\"breadcrumb\":{\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage\",\"url\":\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg\",\"contentUrl\":\"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg\",\"width\":387,\"height\":252,\"caption\":\"Normal viewing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mymonkeydo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Absolute Positioning Inside Float or Relative\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mymonkeydo.com\/#website\",\"url\":\"https:\/\/mymonkeydo.com\/\",\"name\":\"My Monkey Do\",\"description\":\"A Log of Coding Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mymonkeydo.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\",\"name\":\"Webhead\",\"url\":\"https:\/\/mymonkeydo.com\/author\/corey\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Absolute Positioning Inside Float or Relative - My Monkey Do","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:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/","og_locale":"en_US","og_type":"article","og_title":"Absolute Positioning Inside Float or Relative - My Monkey Do","og_url":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/","og_site_name":"My Monkey Do","article_published_time":"2011-05-24T22:01:56+00:00","article_modified_time":"2020-05-04T02:44:10+00:00","og_image":[{"url":"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg"}],"author":"Webhead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webhead","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/","url":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/","name":"Absolute Positioning Inside Float or Relative - My Monkey Do","isPartOf":{"@id":"https:\/\/mymonkeydo.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage"},"image":{"@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage"},"thumbnailUrl":"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal-300x195.jpg","datePublished":"2011-05-24T22:01:56+00:00","dateModified":"2020-05-04T02:44:10+00:00","author":{"@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829"},"breadcrumb":{"@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#primaryimage","url":"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg","contentUrl":"https:\/\/mymonkeydo.com\/wp-content\/uploads\/2011\/05\/normal.jpg","width":387,"height":252,"caption":"Normal viewing"},{"@type":"BreadcrumbList","@id":"https:\/\/mymonkeydo.com\/absolute-positioning-inside-float-or-relative\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mymonkeydo.com\/"},{"@type":"ListItem","position":2,"name":"Absolute Positioning Inside Float or Relative"}]},{"@type":"WebSite","@id":"https:\/\/mymonkeydo.com\/#website","url":"https:\/\/mymonkeydo.com\/","name":"My Monkey Do","description":"A Log of Coding Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mymonkeydo.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829","name":"Webhead","url":"https:\/\/mymonkeydo.com\/author\/corey\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/287"}],"collection":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":0,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"wp:attachment":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}