Home/ Questions/Q 6943603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:10:40+00:00

Hi all. I’d like to be able to highlight a div inside a container

  • 0

diagram showing div layout I'd like

Hi all. I’d like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I’m using the CSS ‘outline’ and ‘box-shadow’ properties to do this. The issue is that when the DIV is the full size of the outer div, you can’t see that it’s selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.

The attached images shows the layout of the divs, red is the outer div, purple the ‘outline’ and black the DIV I want to highlight – in that example the purple highlight to the left is clipped.

So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn’t clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?

EDIT: It looks like this simply isn’t possible in HTML/CSS in the way I described.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set theblack div to “positon:relative”. Then put the outline into that div, and set it with “position:absolute”. With top,left,with and height you can put it “around” the black div.

    Edit:

    Sry, the black div has to be position absolute, too. Working example see here:
    http://jsfiddle.net/t94FV/

    • 0