CSS Instance Tutorial: Making floating Layer overlay effect in Web pages

Article Introduction: CSS Overlay Tips.

There are several techniques for creating a matte chart: from using absolutely positioned elements to outline and pseudo elements. In this article, we will explore the implementation styles of each technology and their pros and cons.

Design patterns are usually a set of best practices and techniques designed to address some of the most common design "problems", usually the design principles presented in the context. These principles are a "stay on the page" principle. This principle is based on the page refresh is to break the user's mind to the flow of the process on the basis of the so-called "blind", we need users regardless of the security and where to avoid breaking the visual process.

We can make wise choices in keeping users in the process of Web pages and models. A way for users to try to get content on the same page in the background of the current page by showing a "mini page" or a pop-up dialog box. This lightweight layer is what we call a "floating layer".

Lightweight floating-layer graphs can be used to ask questions, get input, introduce features, include processes, give instructions, or display information. They can activate events directly by the user (such as clicking on an action, suspending events) or by the Web application to complete an action in different stages--designing web interfaces

When user interaction only accepts applications in pop-up windows, light box ad effects, and other pages, the display becomes dimmed.

The purpose of this tutorial is to introduce you to a method that uses CSS to create dim overlay effects, review their techniques, and identify their pros and cons.

Tip 1: Absolutely positioned elements

The first method uses the absolute positioning of HTML elements on the page to create a floating-layer overlay effect. Using an empty tag in the template div , use the absolute positioning of the CSS to assign div a high value to this z-index , making sure that the empty div remains at the top of the other elements of the page, and that you need to set a higher value than the pop-up window superimposed on the layer z-index .

			
			
   

			
			
			
		
 
If we div add a class name to an empty tag .overlay , use CSS to position it and overlay the layer on the page:
 
html, body{   min-height:
									100%;
					}
			body{   position: relative;
					}
			.overlay{   position: absolute;
					top:
									0;
					left:
									0;
					width:
									100%;
					height:
									100%;
					z-index:
									10;
					background-color:
									rgba(0,0,0,0.5);
					/*暗淡的背景*/
					}
		
 
The code is simple, and there are a few things to be aware of using this technique.
 
First, you need to ensure that the absolute positioning of the floating layer is relative to body . Therefore, if the floating layer is contained in another div , and this div setting is relative positioned, then the overlay positioning is relative to its container, not the page body . So, you either let this overlay be a body child element, or make sure that all of its ancestor elements are not set to relative .
 
In conjunction with, you need to make sure that your page content expands to the bottom of the window or more, because body the extension adapts to its content height (assuming the content is not absolute) if there is not enough content to enlarge body the height to the bottom of the window. This time you need to set the height of the floating layer to body 100%, or not to the bottom of the window, can not cover it.
 
In order to avoid this situation, do not frost the number of content on the page, still need a window and the size of the overlay layer, you need to set a correlation html and body the height.
 
If you set the element to a height of html 100% (100% height is relative to the window height), and body set a 100% height (relative to the html element), the height of the two elements is relative to the window 100%, no matter how deep the contents of the window, Their height is still extended along the height of the content, equivalent to the height of the window, so the height of the floating layer is the same.
 
In this case, if you scroll down the page, the overlay will also roll up, and you will see that the contents below it are not covered, meaning that the overlay is cut off.
 
The solution copy is to html body set a minimum height for elements and elements, which is desirable in most cases. by setting a minimum height, you will ensure that their height reaches the bottom of the window and increases as the content increases. Finally, to increase the height of the floating layer so that he scrolls through the contents of the page with the content, you must body set one on top to allow the height of the position:relative floating layer to extend to body the height.
 
Another thing to note is that this technique does not require z-index a high value to be set. When they overlap, or the elements on the page are on top of another element, many developers tend to z-index set a very high value, such as z-index:999999 . This is not necessary. In much larger cases, z-index setting a value of 10, sometimes even less, is enough to make an element on top of other elements. All you need to know is that if the other element specifies a z-index value, you want to set the value of the floating layer z-index higher than the other elements.
 
Finally, you need to remember that in this technique you need to add an empty div tag, and of course there is no semantics.
 
The advantage of using this technology is that it supports all major browsers, and other old browsers, to IE8.
 
I have built a jsbin, so you can test your results here. Try changing html and body replacing the elements min-height height , or deleting them body , to relative see how the floating layer is cut when you roll.
 

Tip 2: Fixed positioning element 
 The second method you can add a layer that is very similar to the previous method, and use the same . Overlay  element in the structure, but the opposite positioning floats are absolutely positioned, You give it a fixed position and a full width and height to cover the entire window. And because the floating layer in this case is fixed, no matter how you scroll, the floating layer is fixed and covers the entire window area. And that's what we want. 
 
.overlay {position:fixed;
					top:0;
					left:0;
					height:100%;
					width:100%;
					Z-index:10;
					Background-color:rgba (0,0,0,0.5);  
 
 Is not like an absolutely positioned element, as opposed to a container with the  position:relative  set, and fixed positioning is relative to the window: 
 
 
  

   
     
  
   
 Set the The position and size of the elements of the Code>position:absolute are relative to the position and dimension of the containing block, and the position and size of the element with  position:fixed  is relative to the original containing block. This is usually a window: A box of browser windows or pages. --W3C Wiki 
   
 
  
 
 Usually, when using fixed positioning, you don't have to worry about where the floating layer's  div  is placed in the structure. Wherever you put it, you get a fixed position relative to the window, unless you change the floating ancestor element, in which case the transformation element contains the containing blocks that are positioned for all descendant elements, even those that get a fixed position. This fact pits a lot of developers, including myself. So, if you find yourself fixing an element and the result is not as you expected, you have to check whether the descendant elements of the fixed elements have been changed. 
 
 Again, using this technique, we have added an empty element tag, which violates markup semantics. So how can we avoid this? 
 

Tip 3: Use pseudo elements
To avoid adding empty elements in our markup, we can use pseudo elements to create a floating layer.
In this technical style and considerations as in the past basically, we will body use :before or :after pseudo elements on the write style to replace the .overlay null element.
html, body
			{   min-height:
									100%;
					}
			body
			{   position: relative;
					/* 如果给伪元素设置绝对定位，需要先设置相对定位 */
					}
			body:after
			{   content:
									"";
					display: block;
					position: fixed;
					/*也可以设置绝对定位*/
					top:
									0;
					left:
									0;
					height:
									100%;
					width:
									100%;
					z-index:
									10;
					background-color:
									rgba(0,0,0,0.2);
					}
		
You can set the pseudo element to an absolute position relative to the body element, or you can set a fixed position on it. Whatever you choose, you have to consider the two techniques we mentioned earlier.
Take a look at this example:
It is very important that the artifact transition effect is now not supported in Safari and on the mobile end of safari, so this is a huge disadvantage if you want to use a pseudo element to create a floating layer, you have to consider this method does not provide users with smooth animated floating layer effect.

Tip 4: Apply a huge outline 
This method does not require any additional elements to create a dim background float effect. Instead, you can use a pop-up window's outline and set it to a large value to achieve a floating-layer effect.
 
This technique was presented by Lea Verou, and she was the first to share it on Twitter.
 
Suppose there is an element in the Template Implementation pop-up window, there will also be a floating layer:
 

     

      I"m the Modal Window!
     
		
 
When the pop-up window is on top of the other elements of the page, you can use a large outline value as the background layer of the floating layer. outlineusually set a very large value, it needs to be large enough to ensure that its size can cover the size of the entire window.
 
.modal
			{     /*弹出窗口定位在页面中间的样式*/
					position: fixed;
					top:
									50%;
					left:
									50%;
					width:
									300px;
					line-height:
									200px;
					height:
									200px;
					margin-left: -150px;
					margin-top: -100px;
					background-color:
									#f1c40f;
					text-align: center;
					/* 浮层需要的样式 */
					z-index:
									10;
					/* 保持在其他元素上最上面 */
					outline:
									9999px solid rgba(0,0,0,0.5);
					}
		
 
Of course, you can't forget to set the z-index value so that the pop-up window stays on top of the other elements of the page.
 
One thing to remember here is that when you use this technique to implement a floating-layer effect, you can't prevent the mouse from interacting with other page elements. When you click on the other elements on the page, you can't prevent pointers and mouse events, in most cases, this may be an undesirable effect. So in your effect, you have to consider whether to use this technique.
 
Also note that a huge outside border is used outline , which is not available here border-radius . In our example if you have a border using rounded corners, you will notice a gap. If your pop-up window uses a rounded corner, this may not be a good choice.
 

Tip 5: Apply a large Box-shadow to the pop-up window 
The only difference between this technique and the previous example is that the pop-up window does not use outline a huge, but one box-shadow .
 
.modal
			{     /* 弹出窗口居中样式 */
					position: absolute;
					top:
									50%;
					left:
									50%;
					width:
									300px;
					line-height:
									200px;
					height:
									200px;
					margin-left: -150px;
					margin-top: -100px;
					background-color:
									#f1c40f;
					text-align: center;
					border-radius:
									5px;
					/* 浮层的样式 */
					z-index:
									10;
					/* 保持元素在页面其他元素之上*/
					box-shadow:
									0
									0
									0
									9999px rgba(0,0,0,0.5);
					}
		
 
The effect is similar:
 
Of course, this technique does not prevent interaction with other elements of the page.
 
Now, while mentioning the use of this technique as a way to create a floating layer, I strongly recommend that you do not use it to create a floating layer. Even more, don't use too many shadow effects in your page and application.
 
box-shadowThe combination of other styles, such as border-radius or a lot of use, will give the performance a huge bottle of strength, even the application can not be used on smartphones and tablets, because they do not want to use in the application box-shadow .
 
box-shadowRendering is expensive, and using large shadows in fixed elements becomes even worse because the browser is forced to redraw when the page scrolls. Especially in firefoxk, fixed elements and large CSS shadows will make it slower.
 
So, in your application try to avoid using too much of the large box-shadow , because it will be a significant impact on the application rendering. When you discover that you're going to use a lot of box shadows, you can at least try to remove these box shadows from smartphones and tablets, and provide back-up styling for these devices with some special techniques.
 

Tip 6: UseElements 
The last technique we'll talk about is a fairly new technology, and it's great! and used to create a pop-up layer or dialog box, this technique is most semantically.
 
Pop-up windows can now be easily dialog created using elements. dialogelements can provide a function of a dialog box inside a page. A dialog box in the DOM, you can use the normal CSS style.
 
 
     

  
      
 
       
dialogElement represents a part of an application that can be used by a user to perform tasks, such as a dialog box, floating layer, or pop-up window. --WHATWG HTML Spec
 
      
 
     
 
There are dialog four main characteristics of elements in HTML, and three of those features that are used to make floats are most interesting to us (the fourth feature is not implemented when writing this article):
 
 
     

  
      
 
       
In the default case, when you open a dialog box, he is centered vertically. It is still absolutely positioned, so it can also be scrolled. Positioning in the DOM dialog will always be in the middle of the window.
 
       
dialogis a pattern. When one dialog opens, it locks other parts of the document.
 
       
dialogis full screen, and is also placed at the top level. The dialog pattern is at the top level. So you don't have to worry about using it z-index to keep the pop-up layer on top of the other elements of the page.
 
      
 
     
 
Pretty good, right? By default, the pop-up layer is centered on the page, but as described in the previous 1th, it uses absolute positioning, so it can scroll. You can override the default absolute positioning in your style. If you decide to change the fixed position, you can also change it by the top left value.
 
dialogElements can be placed anywhere in the DOM:
 
This is the dialog!
		
 
You can set styles like other block elements in the sample dialog :
 
.modal{   /* 任意样式 */
					background-color: white;
					border-radius:
									5px;
					box-shadow:
									2px 2px 2px rgba(0,0,0,0.2);
					height:200px;
					width:300px;
					/* 设置弹出窗固定在页面，并且居中显示 */
					position:fixed;
					top:50%;
					left:50%;
					margin-left: -150px;
					margin-top:-100px;
					}
		
 
dialogElements also have pseudo elements called to ::backdrop set the background style behind the pop-up layer, creating a floating-layer effect. We used five techniques before, and only this time, you can use the default elements and pseudo elements to create a floating-layer effect.
 
So, to dialog create a floating effect using HTML elements, you only need to dialog set a background color for the element's pseudo element, and make it equal to the window size:
 
.modal::backdrop
			{   position: fixed;
					top:
									0;
					left:
									0;
					right:
									0;
					bottom:
									0;
					background-color:
									rgba(0,0,0,0.5);
					}
		
 
The result looks like this:
 
 
Now you use the dialog element to create a floating layer.
 
To make it easier to work with, dialog an API is provided that allows show() hide() dialog boxes to be displayed and hidden by such functions.
 
You can learn more about dialog elements and their APIs by using the Eiji Kitamura example. When you view it in a browser, the example runs in a Polfill mode.
 

Conclusion
I think we've covered almost all of the technology and you can use it to create a pop-up dialog box. As you may have guessed, the last technique introduced is to dialog create a pop-up window using elements, but when writing this article, it only has the Chrome Canary browser support and needs to turn on the Polyfill variable. So you're trying to use it now, and you have to consider the compatibility of your browser. But once all browsers support it, it will be the best way to create pop-up windows, and there are many features that can be used to handle it.
I hope you enjoy this article and have something to do with it. Thank you for your reading!
Do you know of other CSS techniques to create pop-up windows? If you have a way to do this, you can share it in the comments below.
Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!
If you want to reprint, please indicate the source:
Original English: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/