All geek questions in one place

How to create a div on the whole site?

I try to make 50% opacity <div>appear throughout the site, I gave it the absolute position and width, height 100%. but it is still displayed only in parts of the site, if you scroll down, this does not apply to the rest of the site.

<div style="width:100%; height:100%; margin:0; top:0; left:0; background:#000; position: absolute;">
   loading..
</div>

What can I do?

+3
source share
3 answers

Use position: fixed;instead position: absolute;:

<div style="width: 100%; height: 100%; margin: 0em;
            left: 0em; top: 0em; background: black;
            position: fixed;">Loading ...</div>
+12
source

This also works:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #big {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
    }
</style>
</head>
    <body>
        <div id="big"></id>
    </body>
</html>

Set up topand bottomshould do the trick (it also works with position: fixed).

+6
source

z-index, :

<style scoped="scoped" type="text/css">
	
	.imgWrap {
		position: relative;
		width: 25%x;
	}
	
	.imgDescription {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.75);
		color: #fff;
		visibility: hidden;
		opacity: 0;
		height: 400px;
		width: 400px;
		padding: 5px 5px 5px 5px;
		z-index: 100;
	}
	
	.imgWrap:hover .imgDescription {
		visibility: visible;
		opacity: 1;
	}
</style>

<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="width: 100%;">
        <div class="imgWrap">
		  <p style="text-align: left;"><strong>Text</strong></p>
		  <p>&nbsp;</p>
		  <div class="imgDescription">
		  <ul style="text-align: left;">
		  <li>Description...</li>							
		  </ul>
		</div>
	  </div>
     </td>
    </tr>
  </tbody>
</table>
Hide result
+1

Source: https://habr.com/ru/post/1753281/

More articles:


All Articles