时间戳

首页 > 解决方案 > CSS的理解：位置

css - CSS的理解：位置

问题描述

我对 CSS 属性有疑问：Position

当我创建一个看起来像这样的页面时： 在此处输入图像描述

如您所见，表格和 div 并排放置。以下代码显示了我如何实现这一点： 代码结构：

<div className="daily-task-view">
  <table{...getTableProps()}>
  <thead >
    {headerGroups.map(headerGroup => (
      <tr className="table-header-row"{...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th {...column.getHeaderProps(column.getSortByToggleProps())} className={
              column.isSorted
                ? column.isSortedDesc
                  ? "sort-desc"
                  : "sort-asc"
                : ""
            } ><h5 className="table-header-head"><b>{column.render("Header")}
              </b></h5></th> 
        ))}
      </tr>
    ))}
  </thead>
  <tbody  {...getTableBodyProps()}>
    {page.map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map(cell => {
            return <td className="table-content"  {...cell.getCellProps()}>{cell.render("Cell")}</td>;
          })}
        </tr>
      );
    })}
  </tbody>
</table>
<div className="search">
  <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
  <Button variant="success" className="button-to-add-dailytask">Add Daily Task</Button>
 </div>
</div>

CSS：

.search{
margin-left:200px;
border-radius: 20px;
background-color: white;
width:fit-content;
position: absolute;
top: 10px;
left: 780px;
}
.daily-task-view{
padding-top: 10px; 
 padding-left: 20px;
 position: relative;}

到目前为止，我所做的 CSS 呈现了我想要的视图，但是当我放大或缩小时，作为 div 标签的搜索并没有遵循像移动表格一样移动的动作，而是它没有不要移动并坚持我设定的那个位置。

因为我希望表格和 div 在一起，以便可以以相同的方式进行操作（例如放大/缩小）

我能做什么，我使用了绝对和相对。根据我的理解，两者都需要在一起，但就我而言，它不会那样做。

我对这两个属性的理解是错误的吗？

请帮忙

标签： cssreactjs

解决方案

现在，在您的代码中，您在 .daily-task-view 中拥有 .search div。这可能是问题

这是一个示例，说明如何通过使用包装器 div 并给出 display: flex，然后将 .daily-task-view + .search 分开而不是 .search 在另一个中，从而实现我认为您的想法。在我的示例中，我还为 div 设置了宽度，但它也可以是 fit-content 或您喜欢的。

https://codepen.io/akmalmo/pen/BapeXra

HTML

<div class="wrapper"><div class="daily-task-view">
  Table
</div>
<div class="search">
  Search
 </div>
</div>

CSS

.wrapper{display:flex}
.search{
border-radius: 20px;
width:40%;background:red;
margin-left:20px;}
.daily-task-view{
padding-top: 10px;width:60%;background:blue;}

.daily-task-view, .search{padding:20px;}

这有帮助吗？

推荐阅读