如何防止CSS左右属性推入窗口

时间:2018-06-26 15:00:16

标签: html css

我正在使用right和left属性在页面边缘放置微小图像。

.class img {position:absolute;left:60%}

上面的示例将图像放置在屏幕的右端,仅可见图像的一半,但也会触发水平溢出,使页面可拖动到图像的整个宽度。

我尝试将溢出设置为隐藏,但这没有帮助。

关于如何实现这一目标的任何想法?

2 个答案:

答案 0 :(得分:1)

每当您希望允许项目不在屏幕上但要防止滚动时,都将不得不限制用户的视口。通常可以通过将overflow-x上的overflow-yhidden设置为body来完成此操作。

/* The problem */
.off-screen {
  position: absolute;
  right: -50px;
  
  width: 100px;
  height: 100px;
  
  background-color: red;
}

/* The solution */
body {
  overflow-x: hidden;
}
<div class="off-screen"></div>


注意:根据您的具体情况,可能需要进行调整,但是概念是相同的。如果您在初始帖子中包含更多代码,我可以将其更新为更具体的内容。

答案 1 :(得分:0)

听起来您希望图像出现在屏幕的右边缘。这应该起作用:

   // Simple function to send Weekly Status Sheets to contacts listed on the "Contacts" sheet in the MPD.

// Load a menu item called "Project Admin" with a submenu item called "Send Status"
// Running this, sends the currently open sheet, as a PDF attachment
function onOpen() {
  var submenu = [{name:"Send Status", functionName:"exportSomeSheets"}];
  SpreadsheetApp.getActiveSpreadsheet().addMenu('Project Admin', submenu);  
}

function exportSomeSheets() {
  // Set the Active Spreadsheet so we don't forget
  var originalSpreadsheet = SpreadsheetApp.getActive();

  // Set the message to attach to the email.
  var message = "Daily Sales Snapshot"; // Could make it a pop-up perhaps, but out of wine today

  // Get Project Name from Cell A1
  var projectname = originalSpreadsheet.getRange("H1:H1").getValues(); 
  // Get Reporting Period from Cell B3
  var period = originalSpreadsheet.getRange("B3:B3").getValues(); 
  // Construct the Subject Line
  var subject = projectname + " - Daily Status Sheet - " + period;


  // Get contact details from "Contacts" sheet and construct To: Header
  // Would be nice to include "Name" as well, to make contacts look prettier, one day.
  var contacts = originalSpreadsheet.getSheetByName("Contacts");
  var numRows = contacts.getLastRow();
  var emailTo = contacts.getRange(2, 2, numRows, 1).getValues();

  // Google scripts can't export just one Sheet from a Spreadsheet
  // So we have this disgusting hack

var newSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = newSpreadsheet.getSheets;
  for (var i = 5; i < sheets.length; i++) {
    if (sheets[i].getSheetName() != sheetName) {
      sheet[i].hideSheet();
    }
  }

  // Make zee PDF, currently called "Weekly status.pdf"
  // When I'm smart, filename will include a date and project name
  var pdf = DriveApp.getFileById(newSpreadsheet.getId()).getAs('application/pdf').getBytes();
  var attach = {fileName:'Daily Status.pdf',content:pdf, mimeType:'application/pdf'};

  // Send the freshly constructed email 
  MailApp.sendEmail(emailTo, subject, message, {attachments:[attach]});


}