Transparent box that cuts through box behind it2019 Community Moderator ElectionHow do I give text or an image a transparent background using CSS?Click through div to underlying elementsCSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbarsHow do I make a placeholder for a 'select' box?Div height 100% and expands to fit contentCSS position:fixed is working for the header but not for the footerInvalid css style during zooming in calendarChanging where table starts using HTML and CSSAbsolute positioned element problem in a relative box with border to one sideHow do I make this flex box parent take the full width of the screen?
pipe commands inside find -exec?
label a part of commutative diagram
Can "few" be used as a subject? If so, what is the rule?
How can a new country break out from a developed country without war?
Hot air balloons as primitive bombers
Does convergence of polynomials imply that of its coefficients?
Is xar preinstalled on macOS?
Fair way to split coins
When did hardware antialiasing start being available?
Recursively updating the MLE as new observations stream in
Why doesn't the fusion process of the sun speed up?
Unfrosted light bulb
Knife as defense against stray dogs
Why doesn't the chatan sign the ketubah?
Why are there no stars visible in cislunar space?
Is VPN a layer 3 concept?
Does fire aspect on a sword, destroy mob drops?
UK Tourist Visa- Enquiry
What is 露わになる affecting in the following sentence, '才能の持ち主' (持ち主 to be specific) or '才能'?
PTIJ: Which Dr. Seuss books should one obtain?
What will the Frenchman say?
Writing in a Christian voice
What is it called when someone votes for an option that's not their first choice?
Determine voltage drop over 10G resistors with cheap multimeter
Transparent box that cuts through box behind it
2019 Community Moderator ElectionHow do I give text or an image a transparent background using CSS?Click through div to underlying elementsCSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbarsHow do I make a placeholder for a 'select' box?Div height 100% and expands to fit contentCSS position:fixed is working for the header but not for the footerInvalid css style during zooming in calendarChanging where table starts using HTML and CSSAbsolute positioned element problem in a relative box with border to one sideHow do I make this flex box parent take the full width of the screen?
Is there some way I can get the box not show the pink? That is have all the area within the box show the blue of the body? Ideally the solution not being something where I make four pink divs around the box but using the divs I already have. Maybe some tricky using z-index? Also I need it to show the actual body background. Changing the background color of the box to blue won't work. Thanks.
body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>html css stack z-index division
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
add a comment |
Is there some way I can get the box not show the pink? That is have all the area within the box show the blue of the body? Ideally the solution not being something where I make four pink divs around the box but using the divs I already have. Maybe some tricky using z-index? Also I need it to show the actual body background. Changing the background color of the box to blue won't work. Thanks.
body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>html css stack z-index division
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45
add a comment |
Is there some way I can get the box not show the pink? That is have all the area within the box show the blue of the body? Ideally the solution not being something where I make four pink divs around the box but using the divs I already have. Maybe some tricky using z-index? Also I need it to show the actual body background. Changing the background color of the box to blue won't work. Thanks.
body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>html css stack z-index division
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
Is there some way I can get the box not show the pink? That is have all the area within the box show the blue of the body? Ideally the solution not being something where I make four pink divs around the box but using the divs I already have. Maybe some tricky using z-index? Also I need it to show the actual body background. Changing the background color of the box to blue won't work. Thanks.
body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>body
background-color: azure;
#pink
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
<div id='pink'></div>
<div id='box'></div>html css stack z-index division
html css stack z-index division
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
asked Mar 6 at 23:20
Harper CreekHarper Creek
6811
6811
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45
add a comment |
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45
add a comment |
2 Answers
2
active
oldest
votes
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
add a comment |
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55033737%2ftransparent-box-that-cuts-through-box-behind-it%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
add a comment |
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
add a comment |
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
answered Mar 7 at 0:03
Rafael RochaRafael Rocha
638
638
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
add a comment |
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
yeah, so whenever anything passes through the box it doesn't show up in its transparent background.
– Harper Creek
Mar 7 at 3:42
add a comment |
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
add a comment |
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
add a comment |
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
edited Mar 6 at 23:46
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
answered Mar 6 at 23:39
LuisMendes535LuisMendes535
10317
10317
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55033737%2ftransparent-box-that-cuts-through-box-behind-it%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you want to create a hole inside the pink?
– Temani Afif
Mar 6 at 23:45