Home > Article > Web Front-end > Dynamic element size via CSS positioning manipulation

Dynamic element size via CSS positioning manipulation

不言Original: 2018-11-07 16:23:032980browse

This article introduces to you the content of dynamic element size through CSS positioning operation. Friends who are interested can take a look. Without further ado, let’s look directly at the specific content.

Tips for providing elements to volumes without using width and height or JS.

This is a very simple trick, but many people don’t know it. (Recommended tutorial: CSS Video Tutorial)

Suppose you want to make a modal box that contains all screens except 100px per screen, how would you solve this problem?

Suppose you want to make a modal that covers all of the screen except for 100px of each border, how would you solve this problem?

HTML

<div class="popup">some content</div>

First we need to add an attribute position:fixed to our div.

After we want to position the modal 100px from each side of the viewport, why shouldn't we give it all 4 position attribute parameters (top, right, bottom, left)?

The solution is that you can give all 4 parameters of fixed/absolute positioning, top: 100px, right: 100px, bottom: 100px; left: 100px;.

By doing this you can make dynamic element sizes accordingly from 100px on each side.

CSS

.popup{  
      position:fixed;
      z-index:5;
      left:100px;
      right:100px;
      top:100px; 
      bottom:100px;
      /*some styles*/
      background-color:#ccc;
      border-radius:10px;
      border:solid 3px #000;
      padding:20px; 
      }

The resulting div is an auto-size modal box without a single line of JS.

Full Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	.popup{  
  position:fixed;
  z-index:5;
  left:100px;
  right:100px;
  top:100px; 
  bottom:100px;
  background-color:#ccc;
  border-radius:10px;
  border:solid 3px #000;
  padding:20px;  
}
</style>
</head>
<body>
<div class="popup">文字内容</div>
</body>
</html>

Now, let’s say you want to add a mask underneath the modal box, exactly the same idea!

Here is the solution:

HTML:

<div class="mask"></div>

CSS

.mask{
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  top:0; 
  bottom:0;  
  background-color:rgba(0,0,0,0.8);  
  }

Full code:









文字内容
<div class="mask"></div>

The above is the detailed content of Dynamic element size via CSS positioning manipulation. For more information, please follow other related articles on the PHP Chinese website!

css html JS position

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Animated responsive layout with CSS3 media queriesNext article：Animated responsive layout with CSS3 media queries

See more

Dynamic element size via CSS positioning manipulation

Related articles