Javascript Css/Js：在屏幕左侧放置工具栏，而不与现有页面元素重叠

我正在开发一个插件，帮助设计师/前端开发人员为设计中的不同元素选择颜色。我不想透露细节。其主要思想是，他们在html主体中插入一个javascript文件，该脚本将在页面上创建一种工具栏。我希望此工具栏显示在屏幕的左侧，但不要与页面上的现有元素重叠。所以（可能）我必须将整个身体向右移动N个像素（如果工具栏的宽度为N个像素）

这是一个半生不熟的演示：

基本上我为身体设置了一个左边距。假设页面上没有带

位置：absolute

的元素，它就可以正常工作。如果有，设计将被打破。那么，如何将整个身体向右移动，包括定位在

绝对位置的元素

欢迎任何其他方法，主要问题是：

将工具栏放置在屏幕左侧（N像素宽），但不与现有页面元素重叠。
您可以将所有页面内容添加到一个DIV中，该DIV在css中具有相对位置。那就挪开那张桌子。
在该DIV中具有绝对位置的元素与其位置/边距相对。
您可以将所有页面内容添加到一个在css中具有相对位置的DIV中。那就挪开那张桌子。
在DIV中具有绝对位置的元素与其位置/边距相对应。
这种想法有很多具体问题，但我认为最大的问题是工具栏始终包含在主体内，因此主体的任何特殊位置也会移动工具栏

例如

body {
    position: relative;
    left: 60px;
}

将移动工具栏和页面的其余部分

您可能想考虑将DIV放在其余内容的周围，并相对地定位它。我假设您遇到了这个问题，因为您不能仅仅更改HTML页面以合并工具栏
您可以使用javascript来完成所有这些-获取主体的HTML内容，添加工具栏和div，然后将原始正文内容添加到div中。
这个想法有很多具体问题，但我认为最大的问题是工具栏将始终包含在正文中，因此正文的任何特殊位置也会移动工具栏

例如

body {
    position: relative;
    left: 60px;
}

将移动工具栏和页面的其余部分

您可能想考虑将DIV放在其余内容的周围，并相对地定位它。我假设您遇到了这个问题，因为您不能仅仅更改HTML页面以合并工具栏
您可以使用javascript来完成所有这一切—获取正文的HTML内容，添加工具栏和div，然后将原始正文内容添加到div中。
创建元素，将其作为正文中的第一个元素附加，并将边距添加到正文中

演示：

HTML

香草Javascript

function addToolbar(){

  var bodyz = document.getElementsByTagName('body')[0];

  var placeHolder = document.getElementById("placeHolder");

  var toolbar = document.createElement('div');
  toolbar.setAttribute('id','toolbar');
  toolbar.innerHTML = 'Toolbar';  
  bodyz.insertBefore(toolbar, placeHolder);

  bodyz.style.marginLeft = "60px";
}

创建元素，将其作为正文中的第一个元素追加，并将左边距添加到正文中

演示：

HTML

香草Javascript

function addToolbar(){

  var bodyz = document.getElementsByTagName('body')[0];

  var placeHolder = document.getElementById("placeHolder");

  var toolbar = document.createElement('div');
  toolbar.setAttribute('id','toolbar');
  toolbar.innerHTML = 'Toolbar';  
  bodyz.insertBefore(toolbar, placeHolder);

  bodyz.style.marginLeft = "60px";
}

如果有
位置的元素：fixed
？如果主体包含改变元素位置的脚本？最好的解决方案可能是使用帧或iframe。@dystroy：很好。这似乎是一个复杂的问题..如果有
位置的元素：fixed
？如果主体包含改变元素位置的脚本？最好的解决方案可能是使用帧或iframe。@dystroy：很好。这似乎是一个复杂的问题。首先，谢谢你的回答。问题在于，这似乎无法解决页面上现有元素定位为绝对或固定的问题。不适用于固定，但适用于绝对（试试；）。正如@dystroy所指出的，这种方法有几个潜在的缺点，顺便说一下，对于固定元素，您可以获取页面中的所有元素，检查每个元素的位置是否固定，如果是，则向其左属性添加60px。是的，如果我们将
位置：relative
添加到body:，则解决了
绝对
的问题。谢谢你提出这个解决方案，我会同意的。首先，谢谢你的回答，安德里亚。问题在于，这似乎无法解决页面上现有元素定位为绝对或固定的问题。不适用于固定，但适用于绝对（试试；）。正如@dystroy所指出的，这种方法有几个潜在的缺点，顺便说一下，对于固定元素，您可以获取页面中的所有元素，检查每个元素的位置是否固定，如果是，则向其左属性添加60px。是的，如果我们将
位置：relative
添加到body:，则解决了
绝对
的问题。谢谢你提供这个解决方案，我会同意的。将主体内容包装在一个div中，然后移动它是我的计划B，可以是一个很好的替代解决方案，但是它有自己的副作用。谢谢你们的想法。我的计划B是将正文内容包装在一个div中，然后将其移动，这是一个很好的替代解决方案，但是它有自己的副作用。谢谢你们的想法。我会让你了解最新情况的。谢谢。请看我对上一个答案的评论。谢谢。请看我对上一个答案的评论。