Question

我特别想做的是使网页具有蓝色块和红色块，但仍保持不变，不会像现在一样上下移动。

这是一个gif，表明对角缩放时它可以满足我的要求，但是垂直或水平缩放都会导致位置偏离。

这是HTML

<div class="blockDisplay">
    <center><img src="greenBlock.png" class="greenBlock">
    <img src="redBlock.png" class="redBlock">
    <img src="blueBlock.png" class="blueBlock"></center>
</div>

这是CSS

.blockDisplay {
      background-color: #444;
      overflow: hidden;
}
.greenBlock {
      position: relative;
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 40vh;
      left: 77%;
      width: 23vw;
}

Answer 1

尝试此希望对您有帮助。

CSS

crypto = require('crypto');
moment = require('moment-timezone');

let url = 'https://example.com/api/endpoint';
let api_user = 'apiuser';

// Example key
let api_key = '+raC8YR2F+fZypNJ5q+CAlqLFqNN1AlAfWwkwJLcI7jrAvppjRPikWp523G/u0BLSpN9+2LusJvpSwrfU9X2uA==';

let timestamp = moment.tz(1543554184 * 1000, 'GMT').format('ddd, DD MMM YYYY HH:mm:ss z'); // moment.tz(new Date(), 'GMT').format('ddd, DD MMM YYYY HH:mm:ss z');

let hash_data = 'GET\n' + url + '\n' + api_user + '\n' + timestamp + '\n';

console.log($hashdata);
/*
GET
https://example.com/api/endpoint
apiuser
Fri, 30 Nov 2018 05:03:04 GMT
*/

let decoded_key = Buffer.from(api_key, 'base64').toString('utf8');

console.log(Buffer.from(api_key, 'base64'));
// <Buffer fa b6 82 f1 84 76 17 e7 d9 ca 93 49 e6 af 82 02 5a 8b 16 a3 4d d4 09 40 7d 6c 24 c0 92 dc 23 b8 eb 02 fa 69 8d 13 e2 91 6a 79 db 71 bf bb 40 4b 4a 93 ... >

const hmac = crypto.createHmac('sha256', decoded_key);
hmac.update(hash_data);

// Not sure which should be closest to PHP
// Or if there is a difference
let encoded_hash = hmac.digest('base64');
// let encoded_hash = Buffer(hmac.digest('binary')).toString('base64');

console.log(encoded_hash);
// hmac.digest('base64') == eLLVC9cUvq6Ber6t9TBTihSoq+2VWIMUJKiL4/fIj3s=
// Buffer(hmac.digest('binary')).toString('base64') == eLLVC9cUvq6Ber6t9TBTihSoq+2VWIMUJKiL4/fIj3s=

.blockDisplay {
      background-color: #444;
      overflow: hidden;
}
.greenBlock {
      position: relative;
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 39vh;
      left: 76%;
      width: 40vw;
      height: 10vw;


}
#divOnTop { z-index: 1000;

Answer 2

然后在这里作为答案

.blockDisplay {
      background-color: #444;
      overflow: hidden;
      position: relative;
}
.greenBlock {
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 40vh;
      left: 77%;
      width: 23vw;
}

<div class="blockDisplay">
  <center>
    <img src="greenBlock.png" class="greenBlock">
    <img src="redBlock.png" class="redBlock">
    <img src="blueBlock.png" class="blueBlock">
  </center>
</div>

CSS图像重叠定位

2 个答案: